Ant?Design封裝年份怎么選擇組件

這篇文章主要介紹了Ant Design封裝年份怎么選擇組件的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Ant Design封裝年份怎么選擇組件文章都會有所收獲，下面我們一起來看看吧。

問題一

DatePicker組件設置成年份選擇后，點擊年份后onChange事件不會觸發，value獲取不到，面板也不會關閉，點擊面板外的區域可以關閉面板但年份沒選上，只有選擇年份后敲回車鍵才能正確返回，如此設計估計要被用戶……直接上代碼

<template>
  <div class="yearPicker">
    <a-date-picker
      placeholder="請選擇年份"
      format="YYYY"
      mode="year"
      @change="onChange"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
};
</script>

頁面效果：

解決方法

仔細閱讀官網文檔，發現了DatePicker組件的openChange事件和panelChange事件，于是有了以下的解決方案

<template>
  <div class="yearPicker">
    <a-date-picker
      format="YYYY"
      mode="year"
      :value="year"
      :open="open"
      @openChange="openChange"
      @panelChange="panelChange"
    />
  </div>
</template>

<script>
import moment from "moment";
export default {
  components: { moment },
  data() {
    return {
      open: false,
      year: moment()
    };
  },
  methods: {
    openChange(status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    panelChange(value){
      this.year = value;
      this.open = false;
    }
  }
};
</script>

如此解決了點擊選取萬年份后面板不能關閉的問題，但是隨之而來的我又發現了新的問題，就是清除按鈕不生效了！！！

那就只能重寫清空事件或者設置allowClear屬性為false了，還有就是DatePicker組件的的手動輸入日期是不能用的，但是不知道為什么還要弄這東西，建議開發的時候把輸入框隱藏掉。

隱藏后：

關于“Ant Design封裝年份怎么選擇組件”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Ant Design封裝年份怎么選擇組件”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。