审查视图

node_modules/uview-ui/components/u-dropdown-item/u-dropdown-item.vue 3.3 KB
芦瑞泽 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
<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';
	/**
	 * Drawdownitem
	 * @description 
	 * @tutorial url
	 * @property {String}
	 * @event {Function}
	 * @example
	 */
	export default {
		name: 'u-drawdown-item',
		mixins: [uni.$u.mpMixin, uni.$u.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>