crk-uni-app/uni_modules/uview-ui/components/u-dropdown/u-dropdown.vue

<template>
	<view class="u-drawdown">
		<view
			class="u-dropdown__menu"
			:style="{
				height: $u.addUnit(height)
			}"
			ref="u-dropdown__menu"
		>
			<view
				class="u-dropdown__menu__item"
				v-for="(item, index) in menuList"
				:key="index"
				@tap.stop="clickHandler(item, index)"
			>
				<view class="u-dropdown__menu__item__content">
					<text
						class="u-dropdown__menu__item__content__text"
						:style="[index === current ? activeStyle : inactiveStyle]"
					>{{item.title}}</text>
					<view
						class="u-dropdown__menu__item__content__arrow"
						:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
					>
						<u-icon
							:name="menuIcon"
							:size="$u.addUnit(menuIconSize)"
						></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="u-dropdown__content">
			<slot />
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	/**
	 * Dropdown  
	 * @description 
	 * @tutorial url
	 * @property {String}
	 * @event {Function}
	 * @example
	 */
	export default {
		name: 'u-dropdown',
		mixins: [uni.$u.mixin, props],
		data() {
			return {
				// <EFBFBD>˵<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
				menuList: [],
				current: 0
			}
		},
		computed: {
		
		},
		created() {
			// <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>(u-dropdown-item)<EFBFBD><EFBFBD>this<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>data<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>΢<EFBFBD><EFBFBD>С<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѭ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ö<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
			this.children = [];
		},
		methods: {
			clickHandler(item, index) {
				this.children.map(child => {
					if(child.title === item.title) {
						// this.queryRect('u-dropdown__menu').then(size => {
							child.$emit('click')
							child.setContentAnimate(child.show ? 0 : 300)
							child.show = !child.show
						// })
					} else {
						child.show = false
						child.setContentAnimate(0)
					}
				})
			},
			// <EFBFBD><EFBFBD>ȡ<EFBFBD><EFBFBD>ǩ<EFBFBD>ijߴ<EFBFBD>λ<EFBFBD><EFBFBD>
			queryRect(el) {
				// #ifndef APP-NVUE
				// $uGetRectΪuView<EFBFBD>Դ<EFBFBD><EFBFBD>Ľڵ<EFBFBD><EFBFBD><EFBFBD>ѯ<EFBFBD>򻯷<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ĵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ܣ<EFBFBD>https://www.uviewui.com/js/getRect.html
				// <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ڲ<EFBFBD>һ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>this.$uGetRect<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊthis.$u.getRect<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>߹<EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD>£<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ʋ<EFBFBD>ͬ
				return new Promise(resolve => {
					this.$uGetRect(`.${el}`).then(size => {
						resolve(size)
					})
				})
				// #endif
			
				// #ifdef APP-NVUE 
				// nvue<EFBFBD>£<EFBFBD>ʹ<EFBFBD><EFBFBD>domģ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѯԪ<EFBFBD>ظ߶<EFBFBD>
				// <EFBFBD><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD><EFBFBD>promise<EFBFBD><EFBFBD><EFBFBD>õ<EFBFBD><EFBFBD>ô˷<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʹ<EFBFBD><EFBFBD>then<EFBFBD>ص<EFBFBD>
				return new Promise(resolve => {
					dom.getComponentRect(this.$refs[el], res => {
						resolve(res.size)
					})
				})
				// #endif
			},
		},
	}
</script>

<style lang="scss">
	@import '../../libs/css/components.scss';

	.u-dropdown {

		&__menu {
			@include flex;

			&__item {
				flex: 1;
				@include flex;
				justify-content: center;

				&__content {
					@include flex;
					align-items: center;
				}
			}
		}
	}
</style>