ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

解决Ant Design DatePicker 日期组件选中后无法关闭面板弹窗的问题!

2022-03-08 12:03:15  阅读:499  来源: 互联网

标签:DatePicker 面板 Ant 日期 Design 关闭 year 选中 yearPickShow


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

标签:DatePicker,面板,Ant,日期,Design,关闭,year,选中,yearPickShow
来源: https://www.cnblogs.com/zhaohui9527/p/15979817.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有