背景
移动端多选组件一直没找到合适的组件，然而在一次试探性的询问中得知vue2-vant-dict插件能够实现多选功能。一行代码即可实现下面的效果

 <van-multiple-select-dict dictType="BASKETBALL_STAR" height="500px" placeholder="请选择您喜欢的篮球明显" title="请选择您喜欢的篮球明显" label="喜欢的篮球明星" v-model="baseForm.familyDifficultyType"></van-multiple-select-dict>

可配置参数及说明
dictType：配置字典类型，如性别 SEX，状态STATUS等，支持传入字符串或者对象类型，当传入为对象类型时可接收四个参数。
dictType.type:  字典类型，如性别 SEX，状态STATUS等
dictType.filters:  过滤出来需要展现的数据，支持字符串类型或数组类型，字符串类型且需要传多个值时使用英文逗号隔开。
dictType.reverse:  是否反向筛选，布尔类型，默认false，如果配置为true，则为过滤掉dictType.filters包含的数据。
dictType.filterType:  过滤数据比对的数据字段，默认为字典配置项的 format.value的值
disableObj：配置某些选项为禁止选择,对象类型，可配置参数同对象类型时的dictType，但是无type配置项。
filterDataFun：配置过滤掉部分数据的函数，当数据量大且有一定规则时，可使用函数的形式过滤数据。接收一个形参为list，list为所有字典数据项。示例配置如下：

    filterDataFun(list) {
      // return 回去的数组就是新的展示的数组列表
      return list.filter(item => ["1", "2"].includes(item.value))
    }

disabledDataFun：配置禁选部分数据的函数，当数据量大且有一定规则时，可使用函数的形式禁止选数据。接收一个形参为list，list为所有字典数据项。示例配置如下：

    disabledDataFun(list) {
      return list.map(item => {
        // 给该选项新增disabled参数为true 即可使该选项为禁选
        return {
          ...item,
          disabled: ["9"].includes(item.value)
        }
      })
    }

keyValue：布尔类型，配置为true时，dictChange事件返回的数据类型将是整个对象，默认为false，dictChange事件返回的仅仅为该值。
data：数组类型，配置非字典数据时的选项列表。轻松实现多选功能。示例值如下

[
        {
          label: "一帆风顺",
          value: "1"
        },
        {
          label: "二龙腾飞",
          value: "2"
        },
        {
          label: "三羊开泰",
          value: "3"
        }
]

format：当配置data时有效，当data的值属性非label和value时，可对其format进行配置来兼容data的值。示例值如下

:format="{label: 'name', value: 'code'}"

shape：形状，可选值为 square
icon-size：图标大小，默认单位为 px
max： 最大选择数量
checked-color：选中状态颜色
height：弹出选项卡的高度
title：弹出选项卡的标题
cancelButtonText：取消文案的配置 默认值为 取消
confirmButtonText：确认文案的配置 默认值为 确认

兼容van-field组件所有属性配置
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/field

dictChange事件：当选项改变时触发，并返回当前已选数据，配置keyValue为true时，返回对象数组
slot插槽：接受checkbox的icon插槽配置 示例用法如下

 <van-multiple-select-dict @dictChange="handleChange" checked-color="#ee0a24" :max="2" label="性别(基础用法)" label-width="100px" input-align="right" dictType="AAC004" placeholder="请选择性别" v-model="value1" >
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </van-multiple-select-dict>
    
    data(){
      return {
        activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
        inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
      }
    }

注意事项：
使用此字典包前，需要根据字典接口返回数据格式及前端请求响应拦截后返回的数据进行相应的配置方可使用，一次配置后，项目即可轻松使用字典。再也不用添加各种popup弹出层了。