摘要：
痛点在项目经常会遇到这样的设计，下拉选择框，在vant中没有提供直接的select组件，但是可以使用Field、Popup和Picker这三个组件组合来完成。this.show;}},watch:{selectValue:function{this.result=newVal;},result{this.$emit;}}};效果链接：https://www.jianshu.com/p/3c6609d5dad3补充实际应用中需要拿到下拉选择的id值，但用上面封装的只能拿到text,所以做了如下修改1、组件SelectPicker.vue˂van-fieldv-model="result"v-bind="$attrs"readonlyis-link@click="show=!
痛点 
在项目经常会遇到这样的设计，下拉选择框，在
如果页面中只有一个
在项目的
在项目经常会遇到这样的设计，下拉选择框，在
vant中没有提供直接的select组件，但是可以使用Field、Popup和Picker这三个组件组合来完成。如果页面中只有一个
select这样做做也还可以，但是现在页面中有三个select就有点繁琐了，所以考虑进行组件的封装。 使用期望 <van-field-select-picker label="物料类型"placeholder="选择类型"v-model="materielType" :columns="materielTypeList" />
我希望是在页面中这样使用组件
新建组件在项目的
src/components文件夹下面新建了一个VanFieldSelectPicker.vue文件，具体代码如下，这里主要就是学习了一下组件嵌套时自定义v-model，组件中暂时也没考虑太多其他的东西，有什么问题只能遇到了再更新。<template>
<div>
<van-field
v-model="result"v-bind="$attrs"readonly
is-link
@click="show = !show"
/>
<van-popup v-model="show" position="bottom">
<van-picker
:columns="columns"show-toolbar
:title="$attrs.label"@cancel="show = !show"@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>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);
}
}
};
</script>
<style></style> 效果 
<van-field-select-picker label="物料类型"placeholder="请选择"v-model="value1" :columns="[1, 2, 3]" /> <van-field-select-picker label="品牌"placeholder="请选择"v-model="value2" :columns="[1, 2, 3]" /> <van-field-select-picker label="规格"placeholder="请选择"v-model="value3" :columns="[1, 2, 3]" />
链接：https://www.jianshu.com/p/3c6609d5dad3
补充 实际应用中需要拿到下拉选择的id值，但用上面封装的只能拿到text,所以做了如下修改
1、组件SelectPicker.vue
<template>
<div>
<van-field
v-model="result"v-bind="$attrs"readonly
is-link
@click="show = !show"
/>
<van-popup v-model="show" position="bottom">
<van-picker
:columns="columns"show-toolbar
:title="$attrs.label"@cancel="show = !show"@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>export default{
model:{
prop: "selectValue"},props:{
columns:{
type: Array},selectValue:{
type: String},
name:{
type: String //父组件传进来一个name
}
},data() {
return{
show: false,result: this.selectValue
};
},methods:{
onConfirm(value) {
this.result = value.label;
this.show = !this.show;
this.$emit("getMessage", this.name,value.value);//把value值传给父组件
},},watch:{
selectValue: function(newVal) {
this.result =newVal;
},result(newVal) {
this.$emit("input",newVal);
}
}
};
</script>
<style></style>2、父组件
<template v-else-if="item.type.name == 'picklist' > <input type="hidden" value="":id=item.name> <select-picker :label="item.label" :name="item.name"placeholder="请选择"v-model="dataList[item.name]":columns="item.type.picklistValues"@getMessage="setValue"/> </template>
<script>
export default {
data() {
return {
name:'',
}
},
methods: {
setValue(name,value){ $("#"+name).val(value);
},},
}
</script>