前言

日期时间选择器各大ui中都有相关组件，我公司项目用的就是element ui的组件，element的日期时间选择器绑定的值是数组，而后台要的参数往往是分开的，每次传参都要处理下，下面我们就二次封装下，方便使用。

实现

首先我们要明确二次封装的目的，是修改样式还是新增功能，这样才有二次封装的意义。针对此次二次封装，我们的目的是新增功能，让选择器支持绑定最小、最大值，表示时间的开始与结束，方便传参，而且也能更好地支持ts。目的明确，下面考虑如何实现？el-date-picker绑定的是数组，我们依旧让它绑定一个数组val，通过计算属性去更新开始时间与结束时间。开始与结束时间的值就用props进行传参，并且使用sync修饰符让其能在子组件修改参数。二次封装少不了各种props参数，其他的参数我们根据自己的需要传递即可。
所以技术栈为vue2+装饰器，装饰器写法要简单点，有兴趣的可以学学。日期时间选择器代码如下：

   <template>
  <el-date-picker
    v-model="model"
    :type="type"
    :picker-options="options"
    :default-time="defaultTime"
    range-separator="~"
    align="left"
    :clearable="clearable"
    :disabled="disabled"
    @change="handleChange"
  ></el-date-picker>
</template>

除了model，其他绑定参数含义跟ui所需参数含义是一样的。组件接受的props参数重点是以下几个：

      @Prop({ type: [Array, undefined], required: false }) value: string[]
      @PropSync('min') minValue: string
      @PropSync('max') maxValue: string

@PropSync就是响应式的参数，在传递时需要加上.sync修饰符，value就是范围所需的数组值；min与max就是开始与结束时间。上面组件绑定的是model，model的初始化值有两种情况：

父组件传value，这时候我们需要把传递的数组赋值给model，model的值是依赖value的，所以我们用计算属性。

   private innerValue = [] //初始值
   get model() {
    //判断
    if (Array.isArray(this.value)) {
      return this.value
    }

    return this.innerValue
  }

父组件传min与max，此时model的值也很简单就是[minValue,maxValue]，如果我们直接赋值会有报错，因为model是计算属性，计算属性的修改要用set。赋值可以在mouted判断一下minValue是否存在，也可以用watch去监听一下minValue。

   @Watch('minValue', { immediate: true })
  onMinValueChange() {
    //如果value没有传就赋值minValue与maxValue
    if (!this.value) {
      this.model = [this.minValue, this.maxValue]
    }

  }

一定要用set修改model的值。

   set model(val) {
    const [minValue, maxValue] =

      Array.isArray(val) && val[0] && val[1]

        ? [val[0], val[1]]
        : ['', '']
    if (Array.isArray(this.value) || this.value === undefined) {
      //v-model原理
      this.$emit('input', [minValue, maxValue])
    }
    this.innerValue = [minValue, maxValue]
  }

这样model的取值就能获取正确的初始值，我们往往会在日期修改时触发事件，我们在el-date-picker绑定了change事件，change事件还要在通过emit触发父组件上的事件。

   handleChange(val?: Date[]) {
    const [minValue, maxValue] =

      Array.isArray(val) && val[0] && val[1]

        ?  [val[0], val[1]]
        : []
    this.minValue = minValue
    this.maxValue = maxValue
    //触发父组件事件
    this.$emit('change', [minValue, maxValue])
  }

到此我们就完成了日期选择器的二次封装，将组件注册，就能使用了。

     <DateTimePicker
          :min.sync="listQuery.updateDtStart"
          :max.sync="listQuery.updateDtEnd"
          @change="handleFilter"
        ></DateTimePicker>