zhiyu_uni_duanju/components/dt-dropdown/dt-dropdown.vue

<template>
	<view>
		<view @click="showShadow" class="dropWrap">{{title}}
			<!-- <view class="sanjiao"></view> -->
			<uni-icons class='icon' type="arrowdown" v-if="!showIf"></uni-icons>
			<uni-icons class='icon' type="arrowup" v-else></uni-icons>
		</view>
		<view class="dropdown">
			<view :class="showIf ? 'dropdown-mask' : 'undropdown-mask'" @click="hideShadow"></view>
			<!-- <view class="ul" :style="showIf?'height:'+list.length*30+'px':''"> -->
			<view class="ul" :style="'--i:'+list.length" :class="showIf?'show':''">
				<!-- 不支持就用上面那种 -->
				<view class="li" v-for="(item, index) in list" :key="index" @click="handlerItem(item)">{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'dropdown',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			current: {
				type: [String, Number],
				default: 0
			},
			title: {
				type: String,
				default: '全局操作'
			}
		},
		data() {
			return {
				showIf: false
			};
		},
		methods: {
			handlerItem(value) {
				this.showIf = false
				console.log(value)
				this.$emit('onClick', value);
			},
			hideShadow() {
				this.showIf = false;
			},
			showShadow() {
				this.showIf = true;
				// this.$emit('titleClick', value);
			}
		}
	};
</script>

<style scoped lang="scss">
	.dropWrap {
		box-sizing: border-box;
		// width: 96px;
		// height: 26px;
		// border: 1px solid #e8ecef;
		font-size: 12px;
		color: #666666;
		padding: 4px 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon {
			font-size: 20rpx;
			padding-left: 10rpx;
			color: rgba(216, 216, 216, 1) !important;
		}

		// .sanjiao {
		// 	width: 0;
		// 	height: 0;
		// 	border-left: 6px solid transparent;
		// 	border-right: 6px solid transparent;
		// 	border-top: 6px solid #C5CFD5;
		// 	border-bottom: 6px solid transparent;
		// 	transform: translateY(3px);
		// }
	}

	.dropdown {
		position: absolute;
		z-index: 100;

		.ul {
			width: 136rpx;
			position: relative;
			z-index: 101;
			list-style: none;
			background-color: #fff;
			border-radius: 4rpx;
			padding-left: 0;
			box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
			transition: all 0.2s;
			height: 0;
			overflow: hidden;

			.li {
				box-sizing: border-box;
				color: #000;
				height: 30px;
				// border-bottom: 1px solid #e6eaeb;
				font-size: 24rpx;
				line-height: 30px; //与下面的高度保持一致
				padding-left: 8px;
				text-align: center;

				&:hover {
					background-color: rgba(243, 243, 243, 1);
				}
			}

			// .li:last-child {
			// 	border-bottom: none;
			// }
		}

		.show {
			height: calc(var(--i) * 30px); //与上面的高度保持一致
		}

		.dropdown-mask {
			top: 0;
			left: 0;
			position: fixed;
			width: 100vw;
			height: 100vh;
			z-index: 100;
			pointer-events: auto;
		}

		.undropdown-mask {
			pointer-events: none;
		}
	}
</style>