1. 程式人生 > 其它 >解決Ant Design DatePicker 日期元件選中後無法關閉面板彈窗的問題!

解決Ant Design DatePicker 日期元件選中後無法關閉面板彈窗的問題!

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完成選中後的關閉