ant-design-vue Datepicker年份选择

前言

前段时间开发一个vue前端项目用到了Ant Design, 当时用的日期选择器Datepicker这个组件，但我需要单独年的日期选择器，但是它里面没有提供，但是它提供了mode="year"的选择模式，就是交互存在问题，于是有了下面临时的解决方案，直接上代码

<a-date-picker
        mode="year"
        format="YYYY"
        @panelChange="yearPanelChange"
        v-decorator="[
          'mYear',
          { rules: [{ required: true, message: '必填项!' }]}
        ]"/>

yearPanelChange (value, mode) {
    var selectorClsName = "ant-calendar-year-panel-selected-cell";
    var target = document.querySelector(`td[title='${value.format('YYYY')}']`);
    var classVal = target.getAttribute("class");
    if (classVal.indexOf(selectorClsName) === -1) {
        document.querySelector('.' + selectorClsName).getAttribute("class").replace(selectorClsName, "");
        let newClass = classVal.concat(`  ${selectorClsName}`);
        target.setAttribute("class", newClass);
      }
    var event = document.createEvent('Event')
    event.initEvent('keydown', true, false)
    event = Object.assign(event, {
        ctrlKey: false,
        metaKey: false,
        altKey: false,
        which: 13,
        keyCode: 13,
        key: 'Enter',
        code: 'Enter'
    })
    target.dispatchEvent(event)
    this.form.setFieldsValue({ mYear: value, })
},

总结

组件里面提供了年的选择模式，就是交互上有点问题，所以这里利用代码触发enter键让面板消失