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完成选中后的关闭