Vue-ElementUI 自定義封裝系列-改造DatePicker

因為后台管理系統中經常會用到DatePicker 來作為常規查詢條件中的時間范圍，錄入單據的創建時間范圍，為了追加默認選項和一些常規配置例如：defalutTime來保證查詢的時間范圍是可以到指定日期之內的，快捷時間范圍選項（一周內/一個月/三個月/半年/一年）等，為了將這些相關默認選項進行封裝，將DatePicker組件進行默認封裝，后續相關程序就可以大量減少代碼。

封裝如下：

<template>
  <el-date-picker
    v-model="timevalue1"
    :picker-options="pickerOptions"
    type="daterange"
    placeholder="選擇日期時間"
    align="right"
    @change="changeTime"/>
</template>

<script>
export default {
  name: 'd2DateTimePicker',
  model: {
    prop: 'timevalue',
    event: 'change'
  },

  props: {
    timevalue: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }

  },
  data() {
    return {
      timevalue1: [new Date(), new Date(2021, 10, 11)],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一個月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三個月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    timevalue: {
      immediate: true,
      // console.log(val, 'time')
      handler(val) {
        if (val.length > 0) {
          this.timevalue1 = val
        }
        this.$emit('change', val)
      }

    },
    timevalue1: {
      immediate: true,
      // console.log(val, 'time')
      handler(newVal) {
        this.$emit('change', newVal)
      }

    }

  },
  methods: {
    changeTime(val) {
      // var oval = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
      // console.log(val)
      this.$emit('change', val)
    }
  }

}
</script>

　　

外部使用示例：

<d2-date-time-picker v-model="searchDateRange" />
import d2DateTimePicker from './d2DateTimePicker'


export default {
  name: 'HelloWorld',
  components: {
    d2DateTimePicker
  },
  data() {
    return {
      searchDateRange: [],
    }
  },