关于ant-design-vue时间控件不能单独选年份问题

今天使用ant-design-vue时间控件mode=”year”时，意外发现不能选择年份。翻查官网常见问题，才知道mode属性仅仅是为了控制面板展现状态而添加的属性，无法进行点击选择行为，面板也不会关闭，因此无法触发change事件获取年份。

解决办法

参照这篇文章里的做法，利用 mode 和 panelChange 等方法简单封装一个 YearPicker.vue 组件。

控制显示隐藏

1. open属性 控制弹层是否展开
2. openChange事件 弹出日历和关闭日历的回调

监听日期面板变化

1. panelChange事件 日期面板变化时的回调 function (value, mode)

清空数据

1. 日期面板时间变化不会触发change事件，那么就可以通过allowClear属性（是否显示清除按钮）监听change事件重置数据。

Code

 <template>
  <a-date-picker
    v-model="time"
    :open="isOpen"
    mode="year"
    placeholder='请选择年份'
    format="YYYY"
    @openChange="handleOpenChange"
    @panelChange="handlePanelChange"
    @change="clearValue"
  />
</template>

<script>
import { DatePicker } from 'ant-design-vue'
export default {
  name: 'YearPicker',
  components: {
    [DatePicker.name]: DatePicker
  },
  data () {
    return {
      isOpen: false,
      time: this.value || null
    }
  },
  methods: {
    handlePanelChange (value) {
      this.time = value
      this.isOpen = false
      this.$emit('input', this.time) // v-model
    },
    handleOpenChange (status) {
      this.isOpen = status
    },
    clearValue () {
      this.time = null // 清除数据
      this.$emit('input', this.time)
    }
  },
  props: {
    value: null
  }
}
</script>
复制代码

一些思考

1. 其实在使用DatePicker组件时，几乎没有用到openChange和panelChange事件，那么为什么会有这两个方法暴露出来？对此，应该是为了提高组件可扩展性和可复用性而暴露的方法。
2. 如果没有这两个方法，年份选择应该怎么处理？

所以我们自己开发通用组件也好，业务组件也罢，都需要考虑到可扩展性和可复用性的问题。

不仅仅是解决问题。多思考，是一件很有趣的事情。