[Vue2]Antv X1 年份选择组件封装

由于antv x1版本日期选择器不能直接只选择年份，官方建议是自己封装，那成。

<!--
年份选择组件
-->
<template>
  <a-date-picker
    :value="currentValue"
    mode="year"
  format="YYYY"
  :open="isOpen"
  @panelChange="handlePanelChange"
  @openChange="handleOpenChange"
  @change="handleChange"
  :allowClear=false
  />
</template>

<script>
import moment from 'moment';

export default {
  props: {
    value: {
      type: Number, // 接收父组件传入的年份（格式：YYYY），类型为数字
      default: () => new Date().getFullYear(), // 默认值为当前年份
    },
  },
  data() {
    return {
      isOpen: false, // 控制日期选择器面板的显示状态
      currentValue: null, // 当前选中的年份（moment 对象）
    };
  },
  watch: {
    value: {
      immediate: true, // 立即监听 props 的初始值
      handler(newVal) {
        // 根据父组件传递的值更新当前选中的年份
        this.currentValue = newVal ? this.parseYearToDate(newVal) : null;
      },
    },
  },
  methods: {
    /**
     * 将数字年份转换为 moment 对象
     * @param {Number} year - 年份数字
     * @returns {moment.Moment|null} - 转换后的 moment 对象或 null
     */
    parseYearToDate(year) {
      return year ? moment(String(year), 'YYYY') : null;
    },

    /**
     * 处理面板切换事件
     * @param {moment.Moment} value - 用户选择的年份（moment 对象）
     */
    handlePanelChange(value) {
      const selectedYear = value.year(); // 获取选中的年份（数字）
      this.$emit('change', selectedYear); // 向父组件传递选中的年份
      this.isOpen = false; // 关闭面板
    },

    /**
     * 处理面板打开/关闭状态变化
     * @param {Boolean} open - 面板是否打开
     */
    handleOpenChange(open) {
      this.isOpen = open; // 同步面板的显示状态
    },

    /**
     * 处理值的变化（包括清空操作）
     * @param {moment.Moment|null} value - 用户选择的值（moment 对象或 null）
     */
    handleChange(value) {
      if (!value) {
        this.$emit('change', null); // 如果值为空，向父组件传递 null
      }
      this.currentValue = value; // 更新当前选中的值
    },
  },
};
</script>

使用这个组件的话

   <year-picker v-model="selectedYear" @change="handleYearChange" />

 data() {
    return {
      selectedYear: new Date().getFullYear(),
    }
  },
  mounted() {

  },
  methods: {
    handleYearChange(year) {
      this.selectedYear = year;
    },
  }