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;
????},
????//?根據(jù)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;
????}
有疑問可以留言討論
