ant design vue 年份选择器

因为ant design vue 里面没有原生的年份选择器，需要使用date-picker去改造

html：

<a-date-picker
 mode="year"
 v-decorator="['year']"
 placeholder="请输入年份"
 format="YYYY"
 style="width: 200px"
 :open="yearShowOne"
@openChange="openChangeOne"
  @panelChange="panelChangeOne"/>

属性说明，mode设置year后选择器面板变成年份选择器，v-decorator 将year交给form控制，format格式化为年（如果在方法里面给v-model或者value、v-decorator绑定的变量都赋值后，回显还是年月日，要看看这个格式化有没有打开），open控制年份选择面板的显示与消失 yearShowOne初始值为false。openChang控制年份选择面板的打开与关闭，panelChange控制面板内选择值的变化

js:

// 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.yearShowOne = false;
      this.year = value;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          year: value,
        });
      });
    },

这里为什么要用form.setFieldsValue在给form监控的year给赋值呢，其实form并没有年份选择器做到真正的监听，这里赋值只是为了，当选择之后有一个回显。同理既然监听不了我们可以试一下value和v-model，都是能够完成的，但是要注意的是v-decorator不能跟他们共同使用。

效果图：