vant-picker二次封裝
阿新 • • 發佈：2020-07-15
痛點
在專案經常會遇到這樣的設計，下拉選擇框，在
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
效果
<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>