快捷導(dǎo)航

Ant Design封裝年份選擇組件的方法

更新時(shí)間：2022年04月12日 11:13:49 作者：TYicor

這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

常見(jiàn)問(wèn)題

在平時(shí)的業(yè)務(wù)場(chǎng)景中，我們需要用到一個(gè)年份的選擇組件。但是在antd2.x的版本中，antd的DatePicker組件還沒(méi)有mode屬性，不能單獨(dú)設(shè)置為年份選擇器。雖然antd3.x添加了mode屬性，但是我在使用的過(guò)程中還是發(fā)現(xiàn)了一些問(wèn)題，官網(wǎng)中也有提到相應(yīng)解決方案，但是并沒(méi)有完全解決我的問(wèn)題，再次記錄一下我的解決方案。

問(wèn)題一

DatePicker組件設(shè)置成年份選擇后，點(diǎn)擊年份后onChange事件不會(huì)觸發(fā)，value獲取不到，面板也不會(huì)關(guān)閉，點(diǎn)擊面板外的區(qū)域可以關(guān)閉面板但年份沒(méi)選上，只有選擇年份后敲回車鍵才能正確返回，如此設(shè)計(jì)估計(jì)要被用戶……直接上代碼

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

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

頁(yè)面效果：

解決方法

仔細(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>

如此解決了點(diǎn)擊選取萬(wàn)年份后面板不能關(guān)閉的問(wèn)題，但是隨之而來(lái)的我又發(fā)現(xiàn)了新的問(wèn)題，就是清除按鈕不生效了?。?！

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