手写一个uniapp下拉菜单组件-dropDown，详细步骤！

项目要用到下拉菜单，但是发现uview2.0居然把下拉菜单组件删了，1.0是有的，于是只能自己做一个，实现下拉单选功能，多选需要改一下js逻辑

效果：

 

代码：

<template>
	<view :class="dropDownState ? 'dropDownBox dropDown' : 'dropDownBox noDropDown'" style="">
		<view :class="checkSelect === item ? 'checkSelectBox checkSelect' : 'checkSelectBox'" style=""
			v-for="(item, index) in dataList" :key="index" @click="handleselect(item)">
			{{ item }}
			<div v-if="checkSelect === item">✔</div>
		</view>
	</view>
</template>

 需要传入展开状态dropDownState、以及列表展示数据dataList

<script>
	export default {
		props: {
			dropDownState: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				checkSelect: '',
			}
		},
		methods: {
			handleselect(item) {
				this.checkSelect = item
				this.$emit('checkSelect', this.checkSelect)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dropDown {
		max-height: 1000rpx !important;
		transition: 0.3s; // 过渡动画
		overflow: hidden !important;
		padding: 20rpx 0 10rpx !important;
	}

	.noDropDown {
		transition: 0.3s;
		padding: 0 !important;
		max-height: 0 !important;
	}

	.checkSelect {
		color: #7E5540 !important;
	}

	.dropDownBox {
		width: 100vw;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		background-color: #FFFFFF;
		position: absolute;
		top: 110rpx;
		left: -30rpx;
		z-index: 999;

		.checkSelectBox {
			width: calc(100% - 100rpx);
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>

本组件只是展开的这一部分，因此在父页面当中使用需要给父节点加相对定位position: relative;

定位距离父节点顶部距离自己调节top值，我这里是110rpx

 

 父页面点击控制下拉菜单的按钮根据样式需求自己写

我这里的：

<div @click="handleSelect">请选择 ﹀</div>

 selectState为父页面控制下拉菜单展开状态的变量

handleSelect() {
	this.selectState = !this.selectState
},

 

使用：

addList为列表数据

传入状态、列表数据

<dropDown :dropDownState="selectState" :dataList="addList" @checkSelect="emitCheckSelect"></dropDown>

 

上面已经实现了下拉选功能，遮罩层直接写在父页面当中，盖住下拉菜单下面的节点就行

<view :class="selectState ? 'mask' : 'noMask'" style="height: 100%; width: 100%; background-color: black; opacity: 0; position: absolute; top: 0; left: 0;" @click="handleSelect">
</view>

.mask {
		opacity: 0.3 !important;
		transition: 0.3s;
	}
	.noMask {
		opacity: 0 !important;
		transition: 0.3s;
	}