vant_UI的选择时间小组件封装

<template><div><div class="time-container"><span>开始时间 :</span><van-field v-model="startTimeInner" placeholder="请输入开始时间"  @focus='chooseTime(true)'  @blur="onInputBlur($event, true)" style=" padding-left:5px;width:185px;padding: 0px 5px;" /><!-- <van-button @click="chooseTime(true)" size="mini" type="primary" style="padding: 0px 5px;min-width: 40px;">选择</van-button> --></div><div class="time-container"><span>结束时间 :</span><van-field v-model="endTimeInner" placeholder="请输入结束时间" @focus='chooseTime(true)'   @blur="onInputBlur($event, false)" style="padding-left:5px; width:185px;padding: 0px 5px;" /><!-- <van-button @click="chooseTime(false)" size="mini" type="primary" style="padding: 0px 5px;min-width: 40px;">选择</van-button> --></div><van-popup v-model="showPopup" round position="top" :style="{ height: '40%' }"><van-datetime-picker v-model="currentDate" @confirm="onConfirm" @cancel="onCancel" type="datetime" :title="isStartTime ? '选择开始时间' : '选择结束时间'" :formatter="timeFormatter" /></van-popup></div>
</template><script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import moment from 'moment'@Component({components: {}
})
export default class timePickr extends PageBase {mounted() {}// 开始时间@Prop({default: () => {return new Date()}})private startTimeprivate startTimeInner: any = new Date()// @Emit('update:startTime')// private updateStartTime_inner(val: any) {}@Emit('updateStartTimeFn')private updateStartTimeFn(val: any) {return val}@Watch('startTime', { deep: true, immediate: true })private watchStartTimeChange(val: any) {this.startTimeInner = val}// ===========// 结束时间@Prop({default: () => {return new Date()}})private endTimeprivate endTimeInner: any = new Date()// @Emit('update:endTime')// private updateEndtime_inner(val: any) {}@Emit('updateEndTimeFn')private updateEndTimeFn(val: any) {return val}@Watch('endTime', { deep: true, immediate: true })private watchEndTimeChange(val: any) {this.endTimeInner = val}// ===========private showPopup: boolean = falseprivate currentDate: any = ''private isStartTime: boolean = falseprivate chooseTime(isStartTime) {this.showPopup = trueif (isStartTime) {this.currentDate = moment(this.startTimeInner).toDate()} else {this.currentDate = moment(this.endTimeInner).toDate()}this.isStartTime = isStartTime}private onCancel() {this.showPopup = false}// 日期选择器确定时触发private onConfirm(chooseTime) {if (this.isStartTime) {if (moment(this.endTimeInner).diff(moment(chooseTime)) <= 0) {this.$notify({ type: 'warning', title: 'mes', message: '开始时间不能大于结束时间！' })this.startTimeInner = this.startTimereturn}this.startTimeInner = moment(chooseTime).format('YYYY-MM-DD HH:mm:ss')this.updateStartTimeFn(this.startTimeInner)} else {if (moment(this.startTimeInner).diff(moment(chooseTime)) >= 0) {this.$notify({ type: 'warning', title: 'mes', message: '结束时间不能小于开始时间！' })this.endTimeInner = this.endTimereturn}this.endTimeInner = moment(chooseTime).format('YYYY-MM-DD HH:mm:ss')this.updateEndTimeFn(this.endTimeInner)}this.showPopup = false}// 日期输入框失去焦点时触发private onInputBlur(event, isStartTime) {this.isStartTime = isStartTimethis.onConfirm(event.target.value)}private timeFormatter(type, val) {if (type === 'year') {return val + '年'}if (type === 'month') {return val + '月'}if (type === 'day') {return val + '日'}if (type === 'hour') {return val + '时'}if (type === 'minute') {return val + '分'}return val}
}
</script><style scoped lang="less">
.time-container {margin-top: 10px;display: flex;align-items: center;span {padding: 0px 5px 0px 0px;white-space: nowrap;min-width: 64px;}
}
/deep/ .van-cell.van-field {padding: unset;
}
/deep/ .van-field__left-icon {margin-right: 10px;.van-icon {font-size: 1.4rem;}
}
/deep/ .van-field__value {border: 1px solid #969799;
}
/deep/ .van-field__control {display: block;box-sizing: border-box;width: 100%;min-width: 0;margin: 0;padding: 0;color: #323233;line-height: inherit;text-align: left;background-color: transparent;border: 0;resize: none;padding-left: 10px;
}
</style>

使用：

 <timePickr :startTime="startTime" :endTime="endTime" @updateEndTimeFn="updateEndTime" @updateStartTimeFn="updateStartTime"></timePickr>private updateStartTime(val) {this.startTime = valthis.refreshData()}