痛点

image.png

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

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

使用期望

label="物料类型"

placeholder="选择类型"

v-model="materielType"

:columns="materielTypeList"

/>

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

新建组件

image.png

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

export default {

model: {

prop: "selectValue"

},

props: {

columns: {

type: Array

},

selectValue: {

type: String

}

},

data() {

return {

show: false,

result: this.selectValue

};

},

methods: {

onConfirm(value) {

this.result = value;

this.show = !this.show;

}

},

watch: {

selectValue: function(newVal) {

this.result = newVal;

},

result(newVal) {

this.$emit("input", newVal);

}

}

};

效果

label="物料类型"

placeholder="请选择"

v-model="value1"

:columns="[1, 2, 3]"

/>

label="品牌"

placeholder="请选择"

v-model="value2"

:columns="[1, 2, 3]"

/>

label="规格"

placeholder="请选择"

v-model="value3"

:columns="[1, 2, 3]"

/>

image.png

其他

对于日期选择框基本也可以这样做，只是我项目中暂时还可以用到，用到在封装。