欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)候把輸入框隱藏掉。

隱藏后:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue中正確使用Element-UI組件的方法實(shí)例

    Vue中正確使用Element-UI組件的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于Vue中正確使用Element-UI組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • 一文帶你了解vite對(duì)瀏覽器的請(qǐng)求做了什么

    一文帶你了解vite對(duì)瀏覽器的請(qǐng)求做了什么

    Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vite對(duì)瀏覽器的請(qǐng)求做了什么的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-12-12
  • vue element 表頭添加斜線的實(shí)現(xiàn)代碼

    vue element 表頭添加斜線的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-11-11
  • Vue入門之?dāng)?shù)量加減運(yùn)算操作示例

    Vue入門之?dāng)?shù)量加減運(yùn)算操作示例

    這篇文章主要介紹了Vue入門之?dāng)?shù)量加減運(yùn)算操作,結(jié)合實(shí)例形式分析了vue.js基本數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
    2018-12-12
  • Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼

    Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼

    這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API,類型是一個(gè)函數(shù),本文通過(guò)完整代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2022-10-10
  • vue前端如何向后端傳遞參數(shù)

    vue前端如何向后端傳遞參數(shù)

    這篇文章主要介紹了vue前端如何向后端傳遞參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件的實(shí)現(xiàn)思路

    vue從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件的實(shí)現(xiàn)思路

    這篇文章主要介紹了vue?中從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件,項(xiàng)目用的是?vben?admin?框架,用的是?vue3?+?TS,后端返回的是文件的?url?地址,對(duì)vue后端獲取?url?地址的相關(guān)知識(shí)感興趣的朋友一起看看吧
    2024-02-02
  • apache和nginx下vue頁(yè)面刷新404的解決方案

    apache和nginx下vue頁(yè)面刷新404的解決方案

    這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue動(dòng)態(tài)生成表格的行和列

    Vue動(dòng)態(tài)生成表格的行和列

    這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 徹底搞懂并解決vue-cli4中圖片顯示的問(wèn)題實(shí)現(xiàn)

    徹底搞懂并解決vue-cli4中圖片顯示的問(wèn)題實(shí)現(xiàn)

    這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08

最新評(píng)論