You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

149 lines
3.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="u-drawdown-item">
<u-overlay
customStyle="top: 126px"
:show="show"
:closeOnClickOverlay="closeOnClickOverlay"
@click="overlayClick"
></u-overlay>
<view
class="u-drawdown-item__content"
:style="[style]"
:animation="animationData"
ref="animation"
>
<slot />
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation')
const dom = uni.requireNativePlugin('dom')
// #endif
import props from './props.js';
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
/**
* Drawdownitem
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-drawdown-item',
mixins: [mpMixin, mixin, props],
data() {
return {
show: false,
top: '126px',
// uni.createAnimation的导出数据
animationData: {},
}
},
mounted() {
this.init()
},
watch: {
// 发生变化时,需要去更新父组件对应的值
dataChange(newValue, oldValue) {
this.updateParentData()
}
},
computed: {
// 监听对应变量的变化
dataChange() {
return [this.title, this.disabled]
},
style() {
const style = {
zIndex: 10071,
position: 'fixed',
display: 'flex',
left: 0,
right: 0
}
style.top = uni.$u.addUnit(this.top)
return style
}
},
methods: {
init() {
this.updateParentData()
},
// 更新父组件所需的数据
updateParentData() {
// 获取父组件u-dropdown
this.getParentData('u-dropdown')
if (!this.parent) uni.$u.error('u-dropdown-item必须配合u-dropdown使用')
// 查找父组件menuList数组中对应的标题数据
const menuIndex = this.parent.menuList.findIndex(item => item.title === this.title)
const menuContent = {
title: this.title,
disabled: this.disabled
}
if (menuIndex >= 0) {
// 如果能找到,则直接修改
this.parent.menuList[menuIndex] = menuContent;
} else {
// 如果无法找到则为第一次添加直接push即可
this.parent.menuList.push(menuContent);
}
},
async setContentAnimate(height) {
this.animating = true
// #ifdef APP-NVUE
const ref = this.$refs['animation'].ref
animation.transition(ref, {
styles: {
height: uni.$u.addUnit(height)
},
duration: this.duration,
timingFunction: 'ease-in-out',
}, () => {
this.animating = false
})
// #endif
// #ifndef APP-NVUE
const animation = uni.createAnimation({
timingFunction: 'ease-in-out',
});
animation
.height(height)
.step({
duration: this.duration,
})
.step()
// 导出动画数据给面板的animationData值
this.animationData = animation.export()
// 标识动画结束
uni.$u.sleep(this.duration).then(() => {
this.animating = false
})
// #endif
},
overlayClick() {
this.show = false
this.setContentAnimate(0)
}
},
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
.u-drawdown-item {
&__content {
background-color: #FFFFFF;
overflow: hidden;
height: 0;
}
}
</style>