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>