vant组件库中实现多选下拉框

vant移动端组件中并没有支持多选的下拉组件

所以将vant中的 popup弹出框组件和 CheckBox复选框组件两者结合为多选下拉框

<van-form>
   <van-field
    v-model="detailInfo.coverableCities"
    type="text"
    label="覆盖城市"
    required
    placeholder="请选择可覆盖城市(可多选)"
    :rules="rules.coverableCities"
    @focus="coverableCitiesObj.coverableCitiesShow = true">
   </van-field>
   <van-icon name="arrow" color="#999" size="1.2rem" />
</van-form>
<van-popup
 v-model="coverableCitiesObj.coverableCitiesShow"
 position="bottom"
 :style="{ height: '50%' }">
 <van-checkbox-group v-model="coverableCitiesObj.coverableCities">
    <van-cell-group>
        <van-cell
         v-for="(item, index) in coverableCitiesObj.coverableCitiesList"
         clickable
         :key="index"
         :title="item"
         @click="onSelectCoverableCities(index)">
           <template #right-icon>
             <van-checkbox :name="item" ref="CoverableCities" />
           </template>
         </van-cell>
     </van-cell-group>
 </van-checkbox-group>
</van-popup>

// 可覆盖城市
coverableCitiesObj: {
  coverableCities: [],
  coverableCitiesShow: false,
  coverableCitiesList: ["选项一", "选项二", "选项三"],
},

/**
 * 选择可覆盖城市
 */
onSelectCoverableCities(index) {
  this.$refs.CoverableCities[index].toggle();
  setTimeout(() => {
     this.detailInfo.coverableCities = 
        this.coverableCitiesObj.coverableCities
        ? this.coverableCitiesObj.coverableCities.join(",")
        : "";
  }, 100);
},

效果：

<van-checkbox :name="item" ref="CoverableCities" />

name代表的是遍历的每一个checkbox的名字，也是当前选中单个的checkbox的目标。

ref代表遍历的每一个checkbox的ref，为了找到当前点击的checkbox的目标去使用toggle( )方法。