解決Ant Design DatePicker 日期組件選中后無法關閉面板彈窗的問題!


1.選擇日期后面板不會自動關閉

解決辦法:

比如選擇年組件,選中后彈窗不會自動關閉

<template>
  <div>
    <!-- 年選擇組件 -->
    <a-date-picker
      v-model="year"
      mode="year"
      :allowClear="false"
      format="YYYY"
      placeholder="請選擇年份"
      :open="yearPickShow"
      @panelChange="handlePanelChange"
      @openChange="handleOpenChange"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        year: "",
        yearPickShow: false,
      };
    },
    methods: {
      handleOpenChange(status) {
        this.yearPickShow = status;
      },
      handlePanelChange(value) {
        this.year = value;
        this.yearPickShow = false;
      },
    },
  };
</script>
 
 
1.設置 DatePicker 的mode="year"屬性,可以實現按年的選擇
2.選擇完成之后,日期面板不會自動關閉,需要點擊一下才行,這樣的交與體驗不太好
3.借助:open="yearPickShow"控制日期面板的開關,借助@panelChange和@openChange完成選中后的關閉


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM