vant移动端组件中并没有支持多选的下拉组件
所以将vant中的 popup弹出框组件和 CheckBox复选框组件两者结合为多选下拉框
实现效果:
实现代码:
html部分
<template>
<div>
<!-- <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"></NavBar> -->
<van-field readonly clickable name="type" v-model="name" placeholder="请选择" @click="selectTypes()"/>
<van-popup
v-model="showPicker"
:value="true"
closeable
close-icon="close"
@close="closePopup"
position="bottom"
:style="{ height: '60%' }"
>
<van-checkbox-group
ref="checkboxGroup"
@change="change"
v-model="checkedValue"
>
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="item.specificEventId"
:title="item.specificEventName"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" shape="square" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</van-popup>
</div>
</template>
js部分
<script>
export default {
data(){
return {
showPicker:false,
checkedValue:[],
list:[
{
specificEventId:1,
specificEventName:"a"
},
{
specificEventId:2,
specificEventName:"b"
},
{
specificEventId:3,
specificEventName:"c"
},
{
specificEventId:4,
specificEventName:"d"
},
],
name:'',
activeIndexList:[],
}
},
methods:{
closePopup(){
console.log('关闭');
console.log(this.checkedValue);
var value = []
var values = []
for(var i = 0; i < this.checkedValue.length;i++){
if(value.indexOf(this.checkedValue[i].specificEventId) == -1){
//选中数据如果不包含添加进新数组
value.push(this.checkedValue[i].specificEventId)
values.push(this.checkedValue[i].specificEventName)
}else if(value.indexOf(this.checkedValue[i].specificEventId) > -1){
//包含则删除
var index = value.indexOf(this.checkedValue[i].specificEventId);
var indexs = values.indexOf(this.checkedValue[i].specificEventName)
value.splice(index,1)
values.splice(indexs,1)
}
}
this.activeIndexList = value;
this.name = values.toString()
console.log(this.name);
console.log(this.activeIndexList);
},
toggle(index){
console.log(index);
this.$refs.checkboxes[index].toggle();
},
change(){
console.log('取消');
},
//点击触发弹出层
selectTypes(){
this.showPicker= true;
},
}
}
</script>