文章目录
- 概要
- 前置知识点
- 直接上组件代码
- 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"/>
