vue3+ts+vant实现select效果，单选和多选

项目升级到vue3，那对应的组件重新升级了下，但仅只是针对vue2版本的改造，所以很多地方有瑕疵，代码供大家参考和指点，目前项目够用，但也希望大家提出更好的优化方案
vue2版本

多选checkbox 组件源码

使用，和van-checkbox一样，新增个性化自定义option和搜索

      
   

const value1=ref([''])
const columns=reactive([
        { name: '1', code: '11' },
        { name: '2', code: '22' }
      ])

新增属性

:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以
:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显示的文字)，value（具体值）
:isSearch------------------------------是否开启搜索

Events 类似 van-checkbox，多返回一个参数，

|-confirm -- 点击完成按钮时触发 -- 返回：选中[value:string]值Arrray,选中[单条数据:obj]值Arrray-|
|-cancel -- 点击取消按钮时触发
|-change -- 选项改变时触发 -- 返回：选中[value:string]值Arrray,选中[单条数据:obj]值Arrray-|
|-clickItem --- 点击单条选项时候触发 --返回：选中值的obj|

select 单选组件源码

使用

 

const selectval=ref('11')
const columns=reactive([
        { name: '1', code: '11' },
        { name: '2', code: '22' }
      ])
const confirmDate3=(val:any,val2:string)=>{
    console.log(val,val2)
}

Events 同 vant-picker

|-confirm -- 点击完成按钮时触发 -- 单列：选中[整个数据]的值Aarry，选中的value值string-|
|-cancel -- 点击取消按钮时触发-|
|-change -- 选项改变时触发 -- 单列：选中[整个数据]的值Aarry，选中的value-|

属性

label-width ---------------------------label的一个宽度设置

label="单选select"---------------------label文字

:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以
:isSearch------------------------------是否开启搜索