【无标题】一个可以使用v-model和allow-clear的ant design vue 1.x 的年picker

动手封装一个antdv的年picker

业务中使用antdv 1.x版本，想使用年份选择器，但是只有样式，没有逻辑。那就自己写一个吧。

pane的打开与关闭

首先可以封装一个在组件中嵌套用的picker，只需要仿照着官方提供的思路，补充几个方法，就可以使用了。

allow-clear的设置

像官方这么设置，可以是可以，但是如果需要allow-clear的属性，清空year-picker的内容，好像有点行不通，所以还需要继续搞。

根据这篇文章，参考着select组件可以找到allow-clear的icon在哪里，给他绑定上相关的点击事件就Ok。

之后发现，点击allow-clear的icon之后，会接着触发date-picker的面板打开，推测是父组件捕获了子组件冒泡的方法。所以尝试加一个阻止冒泡也就解决了。

之后，封装组件的时候一直告诉我修改了父组件内容，是个warning，怎么说 0 error(s), 0 warning(s)是个梦想，但是能用就行。

还有点bug，就是如果为空的时候，选择日期之后，红色框框中的内容总是是本年年份（比如今年是2022年，我选择了2020年，但是会先出现下2022之后再变到2020），不怎么影响使用，但是体验稍微有点点不好。

好像可以把上面的输入框给干掉，但是又找不到如何干掉，所以就先这个样子吧。

关于赋值，参考着vue中的关于组件自定义model的方法，可以直接使用v-model获取其中的值，但是没有测试能否在a-form或者a-form-model中的使用。

代码如下。

<template>
  <a-date-picker
    placeholder="年维度统计"
    mode="year"
    format="YYYY"
    valueFormat="YYYY"
    :style="{ width: '128px' }"
    :open="yearSelectorPanelOpenStatus"
    @openChange="changeYearSelectPanelOpenStatus"
    @panelChange="yearSelectPanelChange"
    v-model="date"
    allow-clear
    @mouseenter="mouseenter"
  />
</template>

<script>
import moment from 'moment'

export default {
  name: 'YearPicker',
  // 设置父组件中传入的值
  props: {
    date: {
      type: moment,
      default: () => moment(),
      require: true
    }
  },
  // 设置自定义model, 和触发父组件值改变的方法.
  model: {
    prop: 'date',
    event: 'dateChange'
  },
  data () {
    return {
      // 年选择器日期面板打开状态
      yearSelectorPanelOpenStatus: false,
      // 被选择的年份,避免直接修改父组件传的值
      selectedYear: this.date
    }
  },
  methods: {
    /**
     * 当日期面板关闭时的方法
     * 将改变过的年份赋值, 并触发改变的方法
     * @callback
     * @param value {String} 选择的年份
     */
    yearSelectPanelChange (value) {
      this.selectedYear = moment(value)
      this.$emit('dateChange', value)
      this.yearSelectorPanelOpenStatus = false
    },
    /**
     * @description 修改年选择器开启关闭的状态
     * @callback
     */
    changeYearSelectPanelOpenStatus () {
      this.yearSelectorPanelOpenStatus = !this.yearSelectorPanelOpenStatus
    },
    /**
     * 设置绑定的事件监听器, 点击 allow-clear icon 的时候清空父组件绑定的值
     * @param event
     */
    mouseenter (event) {
      const clearDom = event.path[0].children[0].children[1]
      clearDom.addEventListener('click', (e) => {
        e.stopPropagation()
        this.$emit('dateChange', null)
      })
    }
  }
}
</script>