uni-app引入使用uView

yudao-ui-app/uni_modules/uview-ui/components/u-dropdown-item/u-dropdown-item.vue

@@ -0,0 +1,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>