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 startTime
  private 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 endTime
  private 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 = false
  private currentDate: any = ''
  private isStartTime: boolean = false
  private chooseTime(isStartTime) {
    this.showPopup = true
    if (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.startTime
        return
      }
      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.endTime
        return
      }
      this.endTimeInner = moment(chooseTime).format('YYYY-MM-DD HH:mm:ss')
      this.updateEndTimeFn(this.endTimeInner)
    }
    this.showPopup = false
  }
  // 日期输入框失去焦点时触发
  private onInputBlur(event, isStartTime) {
    this.isStartTime = isStartTime
    this.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 = val
    this.refreshData()
  }

原文地址：https://blog.csdn.net/chabaimgg/article/details/142488994

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！