解決Ant Design DatePicker 日期元件選中後無法關閉面板彈窗的問題!
阿新 • • 發佈:2022-03-08
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完成選中後的關閉