1、DatePicker.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-datetime-picker show-postal type="date" :formatter="formatter" :title="$attrs.label"@cancel="show = !show"@confirm="onConfirm"@change="changeFn" /> </van-popup> </div> </template> <script>export default{ model:{ prop: "selectValue"},props:{ columns:{ type: Array},selectValue:{ type: String} },data() { return{ show: false,result: this.selectValue }; },methods:{ onConfirm(value) { this.result = this.timeFormat(value); this.show = !this.show; },timeFormat(time) { //时间格式化 2019-09-08 let year = time.getFullYear(); let month = time.getMonth() + 1; let day = time.getDate(); return year + '-' + month + '-' +day; }, //选项格式化函数 formatter (type,value) { if (type === 'year') { return`${value}年` } else if (type === 'month') { return`${value}月` } else if (type === 'day') { return`${value}日` } else if (type === 'hour') { return`${value}时` } else if (type === 'minute') { return`${value}分` } else if (type === 'second') { return`${value}秒` } returnvalue },changeFn() { //值变化是触发 // this.result = this.result },},watch:{ selectValue: function(newVal) { this.result =newVal; },result(newVal) { this.$emit("input",newVal); } } }; </script> <style></style>
2、父组件引用
<date-picker :label="item.label"placeholder="请选择"v-model="dataList[item.name]" :required="item.mandatory" :rules="[{ required: item.mandatory, message: '请选择'+item.label}]" />