对于vant picker和datetime-picker二次封装分享

概要

我们日常开发中使用vant实现下拉列表，很多时候绑定的都是对象数组，折腾一下也能搞，但是每次都会写一大堆代码

//template<van-field readonly clickable name="picker":value="searchPopup.warehouseNumber.description"label="仓库"placeholder="点击选择"@click="searchPopup.warehouseNumber.show = true"/><van-popup v-model="searchPopup.warehouseNumber.show"position="bottom"><van-picker show-toolbar:columns="warehouses"value-key="Description"text-key="Code"@confirm="searchPopup.warehouseNumber.onConfirm"@cancel="searchPopup.warehouseNumber.show = false"/></van-popup>//datasearchPopup:{show:false,warehouseNumber:{show:false,description:'',onConfirm:(value)=>{this.searchPopup.warehouseNumber.description=value.Descriptionthis.searchInfo.WarehouseNumber=value.Codethis.searchPopup.warehouseNumber.show=false}}},searchInfo：{WarehouseNumber：''}

这样一大坨重复写就很不爽啊，所以打算抽离出组件，最后我要的用法就是

<MyPicker label="仓库":columns="warehouses"valueKey="Description"textKey="Code"v-model="searchInfo.WarehouseNumber"/>

这里需要说明下我们的columns的结构

[{Code:0,Description:'仓库1'},{Code:1,Description:'仓库2'}]

前置知识点

有个前置知识点需要解释下，不然有的朋友可能代码会看的有点懵
vue2里面有个语法糖，就是v-model等价于：1、组件有个名为value的props，然后v-model变量就绑定到这个value的props上的；2、组件内部抛出的一个事件名为input的事件，事件的值就绑定到v-model这个变量上了

直接上组件代码

<template><div><van-field readonly clickable:value="displayText":label="label"placeholder="点击选择"@click="show = true"/><van-popup v-model="show"position="bottom"><van-picker show-toolbar:columns="columns":value-key="valueKey":text-key="textKey"@confirm="onConfirmHandler"@cancel="show = false"/></van-popup></div></template><script>exportdefault{props:['label','columns','valueKey','textKey','value'],data(){return{show:false}},mounted(){},computed:{displayText(){if(!this.value||!this.columns.length)return''constitem=this.columns.find(item=>item[this.textKey]===this.value)returnitem?item[this.valueKey]:''}},methods:{onConfirmHandler(value){this.$emit('input',value[this.textKey])this.show=false}},}</script><style scoped></style>

datetime-picker组件代码

<template><div><van-field readonly clickable:value="displayValue":label="label"placeholder="点击选择"@click="show = true"/><van-popup v-model="show"position="bottom"><van-datetime-picker show-toolbar v-model="internalValue"type="datetime"title="选择时间"@cancel="show = false"@confirm="onConfirmHandler"/></van-popup></div></template><script>import{formatDateTime}from'@/utils/Common'exportdefault{props:['label','value'],data(){return{show:false,internalValue:this.value||newDate()}},mounted(){},computed:{displayValue(){returnthis.value?formatDateTime(this.value):''}},methods:{onConfirmHandler(value){this.$emit('input',formatDateTime(value))this.show=false}},}</script><style scoped></style>

那个格式化时间就安装moment就行

使用示例

<MyDatetimePicker label="创建时间"v-model="createDatetime"/>