H5 vant piker组件键值对选择（单列）
html代码：
<div class="cell-picker">
<van-field readonly clickable :label="label" :value="defaultVal" :placeholder="placeholder" @click="showPicker = true" v-if="mode === 'field' || mode === undefined" />
<van-cell :title="label" is-link :value="defaultVal === '' || defaultVal === null || defaultVal === undefined ? placeholder : defaultVal" @click="showPicker = true" v-if="mode === 'cell'" />
<van-popup v-model="showPicker" round position="bottom">
<van-picker
ref="picker"
:readonly="readonly === true"
:title="label"
show-toolbar
:columns="columns"
:value-key="fieldName.text"
:default-index="defaultIndex"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
</van-popup>
</div>
js代码：
props: ["label", "columns", "value", "replaceFields", "mode", "readonly", "placeholders"],
data() {
return { showPicker: false, placeholder: "", fieldName: { text: "text", value: "value" }, defaultIndex: null | "", defaultVal: "" };
},
watch: {
value: {
handler(newVal, oldVal) {
this.getTextByVal(newVal);
}
},
replaceFields: {
handler(newVal, oldVal) {
this.initFieldName(newVal);
}
},
placeholders: {
handler(newVal, oldVal) {
if (newVal !== "" && newVal !== undefined) {
this.placeholder = newVal;
}
}
}
},
methods: {
initFieldName(data) {
this.fieldName = { text: "text", value: "value" };
if (data !== undefined) {
Object.keys(data).map(key => {
this.fieldName[key] = data[key];
});
}
},
onConfirm(e) {
this.defaultIndex = this.$refs.picker.getIndexes()[0];
this.$emit("confirm", this.getValuesByIndex());
this.defaultVal = this.columns[this.defaultIndex][this.fieldName.text];
this.showPicker = false;
},
// 根据Index获取values
getValuesByIndex() {
let val = null | "";
val = this.columns[this.defaultIndex][this.fieldName.value];
return val;
},
getTextByVal(value) {
this.defaultIndex = "";
this.defaultVal = "";
this.columns.forEach((item, index) => {
if (item[this.fieldName.value] === value) {
this.defaultIndex = index;
this.defaultVal = item[this.fieldName.text];
}
});
},
onCancel() {
this.showPicker = false;
},
onChange(picker, value, index) {
console.log(picker, value, index);
}
},
created() {
this.placeholder = "请选择" + this.label;
if (this.placeholders !== "" && this.placeholders !== undefined) {
this.placeholder = this.placeholders;
}
this.initFieldName(this.replaceFields);
this.getTextByVal(this.value);
}
css：
::v-deep .cell-picker {
font-size: 14px !important;
.van-picker__toolbar {
button {
margin: 0px 20px;
}
}
}
::v-deep .van-picker-column {
height: 100%;
}
以上为封装起来的子组件，
父组件HTML：
<!-- picker 单列 cell-->
<picker label="picker单列cell" :value="pickerVal" :columns="data" :replaceFields="{ text: 'text', value: 'value' }" @confirm="onConfirm" mode="cell"></picker>
<!-- picker 单列 filed-->
<picker label="picker单列filed" :value="pickerVal" :columns="data" @confirm="onConfirm" mode="field"></picker>
js：
data = [
{
text: "浙江",
value: "01"
},
{
text: "福建",
value: "02"
}
];
pickerVal: ""；
onConfirm(e) {
console.log("picker确认：" + e);
// this.pickerVal = e;
}
有疑问可以留言讨论
