el-date-picker的日期选择器支持身份证后面的长期选项

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

el-date-picker的日期选择器支持身份证后面的长期选项。 实现思路就是： 将9999-12-31日当做一个长期选项，通过操作dom显示实现一个假长期的功能

1. 开启官方的快捷设置功能，快捷设置时间为9999-12-31
2. 通过dom操作将侧边栏的快捷设置按钮移到底部，与此刻按钮并排显示（仅优化界面，不影响使用）
3. 通过失去焦点和获取焦点事件判断，当前选择的时间如果是9999-12-31，就通过dom操作显示为长期即可

• timeliness.vue:

<template>
  <div>
    <DatePicker :id="params.name+params.prop"
                v-model="value"
                type="date"
                :picker-options="pickerOptions"
                :popper-class="params.name+params.prop"
                :disabled="params.disabled"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
                :default-value="new Date()"
                @input="input()"
                @blur="blur()"
                @focus="focus(params.name+params.prop)" />
  </div>
</template>

<script>
/**
     * Timeliness 支持选择长期的选择器
 */
import {
  DatePicker
} from 'element-ui'
export default {
  name: 'Timeliness',
  components: {
    DatePicker
  },
  props: {
    params: {
      type: Object,
      default: function () {
        return {
          name: 'long_term',
          prop: 'test'
        }
      }
    }
  },
  data() {
    return {
      value: '',
      pickerOptions: {
        shortcuts: [{
          text: '长期',
          onClick(picker) {
            picker.$emit('pick', '9999-12-31')
          }
        }]
      }
    }
  },
  watch: {
    'params.value': {
      handler(val, oldVal) {
        // 监听父组件传来的默认值
        if (val) {
          this.value = val
        }
        this.$nextTick(() => {
          // 如果默认值是9999-12-31 则认为是长期
          if (val === '9999-12-31') {
            document.querySelector(`#${this.params.name + this.params.prop}`).value = '长期'
          }
        })
      }
    }
  },
  created() {
  },
  methods: {
    input() {
      this.$emit('transmit', this.value)
    },
    blur() {
      // 如果在获取焦点的时候清空了时间那么失去焦点的时候再把之前设置的长期时间补回去
      if (this.value === null) {
        this.value = this.params.value
      }
      this.$nextTick(() => {
        // 如果传递给父组件的时间是一样的不会触发watch事件 所以在这个地方重新设置一下长期或者是具体时间
        if (this.value === '9999-12-31') {
          document.querySelector(`#${this.params.name + this.params.prop}`).value = '长期'
        }
      })
    },
    // 通过将侧边栏的按钮移到底部实现快捷设置长期时间
    focus(event) {
      this.$nextTick(() => {
        // 如果当前选择的是长期，那么在获取焦点的时候清空value
        // 因为选了长期的话再次选择的时候起止时间是9999年，用户体验不好
        if (this.value === '9999-12-31') {
          this.value = null
        }
        // 限制dom操作只在当前表单项内操作
        const rootDom = document.querySelector(`.${event}`)
        // 找到侧边栏的长期按钮
        const longTerm = rootDom.querySelector('.el-picker-panel__sidebar').childNodes[0]
        // 如果长期按钮已经移动走了，不重复操作
        if (longTerm) {
          // 收起侧边栏
          rootDom.querySelector('.el-picker-panel__sidebar').style.width = '0px'
          // 展开el-picker-panel__body
          rootDom.querySelector('.el-picker-panel__body').style.marginLeft = '0px'
          // 展开el-picker-panel__content
          rootDom.querySelector('.el-picker-panel__content').style.width = 'auto'
          // 获取此刻按钮
          var beforeBtn = rootDom.querySelector('.el-picker-panel__footer').childNodes[0]
          // 给长期按钮设置和此刻一样的样式
          longTerm.className = 'el-button el-picker-panel__link-btn el-button--text el-button--mini'
          // 将长期按钮插入此刻按钮前面
          rootDom.querySelector('.el-picker-panel__footer').insertBefore(longTerm, beforeBtn)
          rootDom.querySelector('.el-picker-panel__footer').style.display = 'block'
        }
      })
    }
  }
}
</script>

• 使用方法：

<timeliness :params="{value,name}"
                      @transmit="(value)=>{}" />