Ant Design封裝年份選擇組件的方法
常見問題
在平時的業(yè)務(wù)場景中,我們需要用到一個年份的選擇組件。但是在antd2.x的版本中,antd的DatePicker組件還沒有mode屬性,不能單獨設(shè)置為年份選擇器。雖然antd3.x添加了mode屬性,但是我在使用的過程中還是發(fā)現(xiàn)了一些問題,官網(wǎng)中也有提到相應(yīng)解決方案,但是并沒有完全解決我的問題,再次記錄一下我的解決方案。
問題一
DatePicker組件設(shè)置成年份選擇后,點擊年份后onChange事件不會觸發(fā),value獲取不到,面板也不會關(guān)閉,點擊面板外的區(qū)域可以關(guān)閉面板但年份沒選上,只有選擇年份后敲回車鍵才能正確返回,如此設(shè)計估計要被用戶……直接上代碼
<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>
頁面效果:
解決方法
仔細(xì)閱讀官網(wǎng)文檔,發(fā)現(xiàn)了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>
如此解決了點擊選取萬年份后面板不能關(guān)閉的問題,但是隨之而來的我又發(fā)現(xiàn)了新的問題,就是清除按鈕不生效了?。?!
那就只能重寫清空事件或者設(shè)置allowClear屬性為false了,還有就是DatePicker組件的的手動輸入日期是不能用的,但是不知道為什么還要弄這東西,建議開發(fā)的時候把輸入框隱藏掉。
隱藏后:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue入門之?dāng)?shù)量加減運(yùn)算操作示例
這篇文章主要介紹了Vue入門之?dāng)?shù)量加減運(yùn)算操作,結(jié)合實例形式分析了vue.js基本數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個API,類型是一個函數(shù),本文通過完整代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10vue從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件的實現(xiàn)思路
這篇文章主要介紹了vue?中從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件,項目用的是?vben?admin?框架,用的是?vue3?+?TS,后端返回的是文件的?url?地址,對vue后端獲取?url?地址的相關(guān)知識感興趣的朋友一起看看吧2024-02-02徹底搞懂并解決vue-cli4中圖片顯示的問題實現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08