ant design-vue 日期组件(年、月)手动关闭弹出框的问题踩坑

官方antd 日期范围组件选中结束日期并不会自动关闭面板，需手动点击后关闭，实际体验不好

所以想办法手动解决，提高体验

从文档中可知open参数控制面板显隐，于是动手试试

<a-range-picker
     ref="monthPicker"
     v-model="monthRange"
     style="width: 150px"
     :placeholder="['开始月', '结束月']"
     format="YYYY-MM"
     value-format="YYYY-MM"
     :mode="monthMode"
     :open="isOpen"
     @openChange="openChange"
     @panelChange="panelChange"
 />

    isOpen = false
    openChange(status: boolean) {
        this.isOpen = status
    }
    panelChange(value: any, mode: any) {
        this.monthRange = value
        this.monthMode = [mode[0] === "date" ? "month" : mode[0], mode[1] === "date" ? "month" : mode[1]]
        this.isOpen = false
    }

实际效果是点击开始时间后也会关闭面板，与最初的需求不符合

此路不通，需另辟蹊径。。。

            <a-range-picker
                ref="monthPicker"
                v-model="monthRange"
                style="width: 150px"
                dropdownClassName="open-range-picker"
                :placeholder="['开始月', '结束月']"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :mode="monthMode"
                @panelChange="handlePanelChange"
            />

    monthRange: string[] = []
    monthMode = ["month", "month"]
    handlePanelChange(value: any, mode: any) {
        if (this.monthRange[1] && (this.monthRange[1] as any).$d != value[1].$d) {
            ;(this.$refs.monthPicker as any).$refs.picker.sOpen = false
        }
        this.monthRange = value
        this.monthMode = [mode[0] === "date" ? "month" : mode[0], mode[1] === "date" ? "month" : mode[1]]
    }

控制台打印出来看下$d的值

控制显隐的关键字段sOpen

哈哈，完美解决

另外年范围选择器也同样适用，只需修改mode = ["year", "year"]即可

antd 坑还有很多继续踩