之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~
小程序选择框_WeiflR10的博客-****博客_小程序选择框
子组件
<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' + }`)"><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' + }`)"><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' + }`)">
<view v-if="==0" class="nodata">暂无数据</view>
<view v-else :class="==valueid ? 'active':'noactive'" v-for="(item,index) in selectcontent" @click="changecontent(item)">
{{}}
</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<;i++){
this.$(`${'getjiantou' + i}`,true)
}
},
methods: {
// 箭头切换 false是展开,true是关闭
evaluateCondition(condition) { //condition:就是属性名isjiantou0,isjiantou1...
return this[condition] //返回true或false
},
// 下拉框收起和下拉
changejiantou(num,allnum){
// 箭头切换 false是展开,true是关闭 将值存进vuex,改变时通知到所有相关组件
if(this.$[`${'isjiantou' + num}`]){
this.$(`${'getjiantou' + num}`,false)
}else{
this.$(`${'getjiantou' + num}`,true)
}
for(var i=0;i<allnum;i++){
if(i!=num){
this.$(`${'getjiantou' + i}`,true)
}
}
},
// 选择数据后回显
changecontent(e){
this.$(`${'getjiantou' + }`,true)
//重复选同一个选择框,是不会触发事件的
if(!=){
=,
=,
this.$emit("change",) //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 './'
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>
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store = new ({
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){
('getjiantou0',args);
},
getjiantou1(context,args){
('getjiantou1',args);
},
getjiantou2(context,args){
('getjiantou2',args);
},
getjiantou3(context,args){
('getjiantou3',args);
},
getjiantou4(context,args){
('getjiantou4',args);
},
getjiantou5(context,args){
('getjiantou5',args);
},
getjiantou6(context,args){
('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++){
(`${'jiantou' + i}`) //isjiantou0
(this[`${'jiantou' + i}`]) //true / false
}