Ant Design Vue v1.x 填坑记录 - DatePicker

前言：

vue是v2.6.11版本，ant-design-vue是v1.6.2版本（如果是使用vue的项目，还是建议用饿了吗）

问题：

DatePicker使用范围选择a-range-picker时，如果mode为month或year（选择到月或年），点击选择后不触发change事件，面板也不会自动关闭。

<a-range-picker
    format="YYYY-MM"
    :allowClear="false"
    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
    :placeholder="['开始时间', '结束时间']"
    separator="——"
    :mode="['month', 'month']"
    class="date-filter"
    :value="dateString"
    @change="handleDateChange"
>
</a-range-picker>

解决方法：

openChange、panelChange

panelChange是日期变化时的回调；参数是当前选中的日期对象，openChange是面板打开关闭的回调，选中后无法自动关闭，用户点击空白区域后会自动关闭，在关闭事件的回调里处理后续业务逻辑

<a-range-picker
    format="YYYY-MM"
    :allowClear="false"
    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
    :placeholder="['开始时间', '结束时间']"
    separator="——"
    :mode="['month', 'month']"
    class="date-filter"
    :value="dateString"
    @openChange="handleDateOpenChange"
    @panelChange="handleDatePanelChange"
>
</a-range-picker>

    // 日期选择事件
    handleDatePanelChange(value) {
      if (value) {
        this.filterDateChange = true
        this.dateString = [value[0].format('YYYY-MM'), value[1].format('YYYY-MM')]
      }
    },
    // 日期选择框打开关闭事件
    handleDateOpenChange(val) {
      // 如果关闭选择框
      if (!val) {
        // 如果日期改变
        if (this.filterDateChange) {
          this.filterDateChange = false
          //......
        }
      }
    },