Ant Design封装年份选择组件的方法

<template>
  <div class="yearPicker">
    <a-date-picker
      placeholder="请选择年份"
      format="YYYY"
      mode="year"
      @change="onChange"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
};
</script>

<template>
  <div class="yearPicker">
    <a-date-picker
      format="YYYY"
      mode="year"
      :value="year"
      :open="open"
      @openChange="openChange"
      @panelChange="panelChange"
    />
  </div>
</template>

<script>
import moment from "moment";
export default {
  components: { moment },
  data() {
    return {
      open: false,
      year: moment()
    };
  },
  methods: {
    openChange(status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    panelChange(value){
      this.year = value;
      this.open = false;
    }
  }
};
</script>