picker多选 vant_Vant UI 二次封装 --下拉选择框

痛点

image.png

在项目经常会遇到这样的设计，下拉选择框，在vant中没有提供直接的select组件，但是可以使用Field、Popup和Picker这三个组件组合来完成。

如果页面中只有一个select这样做做也还可以，但是现在页面中有三个select就有点繁琐了，所以考虑进行组件的封装。

使用期望

label="物料类型"

placeholder="选择类型"

v-model="materielType"

:columns="materielTypeList"

/>

我希望是在页面中这样使用组件

新建组件

image.png

在项目的src/components文件夹下面新建了一个VanFieldSelectPicker.vue文件，具体代码如下，这里主要就是学习了一下组件嵌套时自定义v-model，组件中暂时也没考虑太多其他的东西，有什么问题只能遇到了再更新。

v-model="result"

v-bind="$attrs"

readonly

is-link

@click="show = !show"

/>

:columns="