uniapp下拉框组件

之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~

小程序选择框_WeiflR10的博客-CSDN博客_小程序选择框

子组件

<template>
	<view style="position: relative;">
		<!-- 选中之后的数据展示 -->
		<view class="inputPlaceholder" v-if='inputVal' @click="changejiantou(num,allnum)">
			<input :placeholder="placeholderText" disabled v-model="inputVal"></input>
			<view class="jiantou1" v-if="evaluateCondition(`${'isjiantou' + this.num}`)"><i class="iconfont icon-jiantou1"></i></view>
			<view class="jiantou1" v-else><i class="iconfont icon-jiantou"></i></view>
		</view>
		<!-- 未选择时的Placeholder展示 -->
		<view class="inputPlaceholder" v-else @click="changejiantou(num,allnum)">
			<input :placeholder="placeholderText" disabled v-model="inputVal"></input>
			<view class="jiantou1" v-if="evaluateCondition(`${'isjiantou' + this.num}`)"><i class="iconfont icon-jiantou1"></i></view>
			<view class="jiantou1" v-else><i class="iconfont icon-jiantou"></i></view>
		</view>
		<!-- 下拉展开后的可选择内容 -->
		<view class="content" v-if="!evaluateCondition(`${'isjiantou' + this.num}`)">
			<view v-if="selectcontent.length==0" class="nodata">暂无数据</view>
			<view v-else :class="item.id==valueid ? 'active':'noactive'" v-for="(item,index) in selectcontent" @click="changecontent(item)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>
 
<script>
import {mapState} from 'vuex'
export default{
    //selectcontent:下拉框的数据内容  num:本页面的第几个下拉框  allnum:本页面总共有多少个下拉框  placeholderText:placeholder显示的文字
	props:['selectcontent','num','allnum','placeholderText'],
	data() {
		return{
			inputVal:undefined,  //选中的值,name
			valueid:''  //选中的值,id
		}
	},
	computed:{
		// 箭头切换 false是展开,true是关闭
		...mapState({
			isjiantou0:state=>state.isjiantou0,
			isjiantou1:state=>state.isjiantou1,
			isjiantou2:state=>state.isjiantou2,
			isjiantou3:state=>state.isjiantou3,
			isjiantou4:state=>state.isjiantou4,
			isjiantou5:state=>state.isjiantou5,
			isjiantou6:state=>state.isjiantou6
		})
	},
    mounted(){
        for(var i=0;i<this.allnum;i++){
            this.$store.dispatch(`${'getjiantou' + i}`,true)
        }
    },
	methods: {
		// 箭头切换 false是展开,true是关闭
		evaluateCondition(condition) {   //condition:就是属性名isjiantou0,isjiantou1...
		    return this[condition]  //返回true或false
		},
		// 下拉框收起和下拉
		changejiantou(num,allnum){
			// 箭头切换 false是展开,true是关闭 将值存进vuex,改变时通知到所有相关组件
			if(this.$store.state[`${'isjiantou' + num}`]){
				this.$store.dispatch(`${'getjiantou' + num}`,false)
			}else{
				this.$store.dispatch(`${'getjiantou' + num}`,true)
			}
			for(var i=0;i<allnum;i++){
				if(i!=num){
					this.$store.dispatch(`${'getjiantou' + i}`,true)
				}
			}
		},
		// 选择数据后回显
		changecontent(e){
			this.$store.dispatch(`${'getjiantou' + this.num}`,true)
            //重复选同一个选择框,是不会触发事件的
			if(e.name!=this.inputVal){
				this.inputVal=e.name,
				this.valueid=e.id,
				this.$emit("change",e.id)  //change事件,可以在父组件中调用
			}
		},
	}
}
</script>
 
<style>
	.inputPlaceholder{
	    min-width: 360rpx;
        width: calc(100% - 60rpx);
	    height: 45rpx;
	    border: 1px solid #DEDEDE;
	    padding: 8rpx 40rpx 8rpx 20rpx;
	    margin-left: 16rpx;
	    border-radius: 10rpx;
	    position: relative;
	    overflow:hidden;
	    text-overflow: ellipsis;
	    white-space:nowrap;
	  }
	  .jiantou1{
	    position: absolute;
	    right: 10rpx;
	    top: 8rpx;
	    color: #CBCBCB;
	  }
	  .content{
	    min-width: 384rpx;
        width: calc(100% - 40rpx);
	    max-height: 240rpx;
	    position: absolute;
	    top: 62rpx;
	    left: 16rpx;
	    background: #FFFFFF;
	    box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);
		border-radius: 20rpx;
	    padding: 20rpx;
	    overflow-x: hidden;
	    overflow-y: scroll;
		z-index: 10000;
	  }
	  .noactive{
	    padding: 10rpx 0;
	  }
	  .active{
		padding: 10rpx 0;
	    color: #56D88A;
	  }
	  .nodata{
		  color: #999;
		  text-align: center;
	  }
</style>

父组件

<template>
	<view>
		<view class="input-row">
			<view class="input-title">类别</view>
			<ys-select :selectcontent='driverTypeOptions' placeholderText='请选择类别' num='0' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view class="input-title">人员</view>
			<ys-select :selectcontent='driverOptions' placeholderText='请选择人员' num='1' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view class="input-title">属性</view>
			<ys-select :selectcontent='carTypeOptions' placeholderText='请选择属性' num='2' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view class="input-title">车辆</view>
			<ys-select :selectcontent='carOptions' placeholderText='请选择车辆' num='3' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view style="padding-right: 20rpx;">运输人员</view>
			<ys-select :selectcontent='escortOptions' placeholderText='请选择运输人员' num='4' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view class="input-title">地点</view>
			<ys-select :selectcontent='recycleOptions' placeholderText='请选择地点' num='5' :allnum='allnum'></ys-select>
		</view>
		<view class="input-row">
			<view class="input-title">商户</view>
			<ys-select :selectcontent='merchantsOptions' placeholderText='请选择商户' num='6' :allnum='allnum'></ys-select>
		</view>
	</view>
</template>
 
<script>
	import ysselect from './ys-select.vue'
	export default {
		components:{
			'ys-select':ysselect
		},
		data() {
			return {
				driverTypeOptions:[
					{id:1,name:'1'},
					{id:2,name:'2'}
				],
				driverOptions:[],
				carTypeOptions:[
					{id:1,name:'1'},
					{id:2,name:'2'}
				],
				carOptions:[],
				escortOptions:[], 
				recycleOptions:[],
				merchantsOptions:[],
				DriverTypeVal:'', 
				allnum:6,  //选择框的个数
			};
		}
	};
</script>
 
<style>
	.input-row{
		position: relative;
		display: flex;
		align-items: center;
		padding: 0 0 30rpx 24rpx;
	}
	.input-title{
		padding-right: 20rpx;
	}
	.input-title::before{
		content: '*';
		font-size: 40rpx;
		color: red;
		position: absolute;
		left: 0;
		top: 14rpx;
	}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
    state: {
		isjiantou0:true,
		isjiantou1:true,
		isjiantou2:true,
		isjiantou3:true,
		isjiantou4:true,
		isjiantou5:true,
		isjiantou6:true,
	},
    mutations: {
		getjiantou0(state,n){
			state.isjiantou0=n
		},
		getjiantou1(state,n){
			state.isjiantou1=n
		},
		getjiantou2(state,n){
			state.isjiantou2=n
		},
		getjiantou3(state,n){
			state.isjiantou3=n
		},
		getjiantou4(state,n){
			state.isjiantou4=n
		},
		getjiantou5(state,n){
			state.isjiantou5=n
		},
		getjiantou6(state,n){
			state.isjiantou6=n
		}
	},
    actions: {
		getjiantou0(context,args){
			context.commit('getjiantou0',args);
		},
		getjiantou1(context,args){
			context.commit('getjiantou1',args);
		},
		getjiantou2(context,args){
			context.commit('getjiantou2',args);
		},
		getjiantou3(context,args){
			context.commit('getjiantou3',args);
		},
		getjiantou4(context,args){
			context.commit('getjiantou4',args);
		},
		getjiantou5(context,args){
			context.commit('getjiantou5',args);
		},
		getjiantou6(context,args){
			context.commit('getjiantou6',args);
		},
	}
})
export default store

注：模板字符串。

如果想在js中输出this.isjiantou0  this.isjiantou1  this.isjiantou2 ...，可以使用模板字符串

//`${'jiantou' + i}`
//this[`${'jiantou' + i}`]   这个就相当于this.isjiantou0 所以输出的时候直接是值
 
for(var i=0;i<6;i++){
    console.log(`${'jiantou' + i}`)  //isjiantou0
    console.log(this[`${'jiantou' + i}`])  //true / false
}