uniapp组件封装-下拉菜单栏_uniapp 下拉菜单

如图效果

<template>
	<!-- 组件整体 -->
	<view class="select_down_mDown">
		<!-- 组件头部 -->
		<view class="select_down" @click.stop="showDownMenu">
			<!-- 提示文字部分 -->
			<text class="select_down_text">{{value}}</text>
			<!-- 分格线 -->
			<text class="select_down_border"></text>
			<!-- 图标 -->
			<image src="../../static/down_menu.png" class="select_down_image"></image>
		</view>
		<!-- 下拉显示区域 -->
		<view class="select_down_" v-show="showMenu">
			<text class="select_down_item" v-for="(item,index) in data" :key='index' @click="item_click(item)">{{item}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showMenu:false,
			}	
		},
		props:{
			value:{
				type:String
			},
			data:{
				type:Array
			}
		},
		computed:{
			values:{
				get(){
					return this.value
				},
				set(val){
					this.$emit('input',val)
				}
			}
		},
		methods:{
			// 判断是否展开下拉框
			showDownMenu(){
				// 点击下拉菜单整体外关闭下拉菜单
				document.body.addEventListener('click',()=>{
					this.showMenu=false
				})
				//是否关闭 or 打开
				if(this.showMenu){
					this.showMenu=false
				}else{
					this.showMenu=true
				}
			},
			item_click(item){
				this.values=item+''
			}
		}
	}
</script>

<style scoped lang="scss">
	.select_down_mDown{
		position: relative;
		transform: translateX(-20rpx);
		.select_down{
			width: 434rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 14rpx;
			display: flex;
			flex-direction:wrap ;
			align-items: center;
			.select_down_text{
				width: 362rpx;
				height: 36rpx;
				font-size: 30rpx;
				font-family: SF UI Text;
				font-weight: 300;
				line-height: 36rpx;
				color: #CECECE;
				opacity: 1;
				margin-left: 0;
				padding-left: 20rpx;
			}
			.select_down_border{
				width: 7rpx;
				height: 60rpx;
				border-left: 7rpx solid #F0F0F0;
				margin-left: 0;
			}
			.select_down_image{
				width: 20rpx;
				height: 16rpx;
				margin-left: 4rpx;
			}
		}
		.select_down_{
			width: 434rpx;
			height: 600rpx;
			background: #FFFFFF;
			opacity: 1;
			margin-top: 2rpx;
			border-radius: 14rpx;
			padding-top: 10rpx;
			display: flex;
			flex-direction: column;
			overflow-x: hidden;
			.select_down_item{
				padding: 10rpx;
				font-size: 30rpx;
				color: #000;
				width: 360rpx;
				border-radius: 14rpx;
				margin-left: 26rpx;
				border-bottom: 2rpx solid #F0F0F0;
			}
			.select_down_item:hover{
				background-color: #FC603A;
			}
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

-
图中三角标在 -----------------------------------------^