frontend/examking-app/plugins/uview-ui/components/u-dropdown/u-dropdown.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view class="u-dropdown">
		<view class="u-dropdown__menu" :style="{
			height: $u.addUnit(height)
		}" :class="{
			'u-border-bottom': borderBottom
		}">
			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
				<view class="u-flex">
					<text class="u-dropdown__menu__item__text" :style="{
						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
						fontSize: $u.addUnit(titleSize)
					}">{{item.title}}</text>
					<view class="u-dropdown__menu__item__arrow" :class="{
						'u-dropdown__menu__item__arrow--rotate': index === current
					}">
						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="u-dropdown__content" :style="[contentStyle, {
			transition: `opacity ${duration / 1000}s linear`,
			top: $u.addUnit(height),
			height: contentHeight + 'px'
		}]"
		 @tap="maskClick" @touchmove.stop.prevent>
			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
				<slot></slot>
			</view>
			<view class="u-dropdown__content__mask"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * dropdown 下拉菜单
	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
	 * @tutorial http://uviewui.com/components/dropdown.html
	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
	 * @event {Function} open 下拉菜单被打开时触发
	 * @event {Function} close 下拉菜单被关闭时触发
	 * @example <u-dropdown></u-dropdown>
	 */
	export default {
		name: 'u-dropdown',
		props: {
			// 菜单标题和选项的激活态颜色
			activeColor: {
				type: String,
				default: '#2979ff'