解决 antd 老版本datepicker选择无法自动关闭

墙的对面是海

于 2024-02-20 15:00:58 发布

阅读量848

点赞数 9

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_52630125/article/details/136190618

版权

 <!-- dom -->
    <a-date-picker
      v-model="year"
      mode="year"
      :allowClear="false"
      format="YYYY"
      placeholder="请选择年份"
      :open="bShowYearPicker"
      @panelChange="handlePanelChange"
      @openChange="handleOpenChange"
    />
    
    
<script>
  export default {
    data() {
      return {
        year: "",
        bShowYearPicker: false,
      };
    },
    methods: {
      handleOpenChange(status) {
        this.bShowYearPicker= status;
      },
      handlePanelChange(value) {
        this.year = value;
        this.bShowYearPicker= false;
      },
    },
  };
</script>

设置 DatePicker 的mode="year"属性，可以实现按年的选择
选择完成之后，日期面板不会自动关闭，需要点击一下才行，这样的交与体验不太好
借助 :open="bShowYearPicker" 控制日期面板的开关，借助 @panelChange 和 @openChange 完成选中后的关闭