Ant Design封装年份选择组件的方法
更新时间：2022年04月12日 11:13:49 作者：TYicor
这篇文章主要为大家详细介绍了Ant Design封装年份选择组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
常见问题
在平时的业务场景中，我们需要用到一个年份的选择组件。但是在antd2.x的版本中，antd的DatePicker组件还没有mode属性，不能单独设置为年份选择器。虽然antd3.x添加了mode属性，但是我在使用的过程中还是发现了一些问题，官网中也有提到相应解决方案，但是并没有完全解决我的问题，再次记录一下我的解决方案。
问题一
DatePicker组件设置成年份选择后，点击年份后onChange事件不会触发，value获取不到，面板也不会关闭，点击面板外的区域可以关闭面板但年份没选上，只有选择年份后敲回车键才能正确返回，如此设计估计要被用户……直接上代码
<template>
<div class="yearPicker">
<a-date-picker
placeholder="请选择年份"
format="YYYY"
mode="year"
@change="onChange"
/>
</div>
</template>
<script>
export default {
methods: {
onChange(date, dateString) {
console.log(date, dateString);
}
}
};
</script>页面效果：
解决方法
仔细阅读官网文档，发现了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>如此解决了点击选取万年份后面板不能关闭的问题，但是随之而来的我又发现了新的问题，就是清除按钮不生效了！！！
那就只能重写清空事件或者设置allowClear属性为false了，还有就是DatePicker组件的的手动输入日期是不能用的，但是不知道为什么还要弄这东西，建议开发的时候把输入框隐藏掉。
隐藏后：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于vite对浏览器的请求做了什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue element 表头添加斜线的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Vue入门之数量加减运算操作,结合实例形式分析了vue.js基本数值运算相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue前端如何向后端传递参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue从后端获取到文件的 url 地址及前端根据 url 地址下载文件的实现思路
这篇文章主要介绍了vue 中从后端获取到文件的 url 地址及前端根据 url 地址下载文件,项目用的是 vben admin 框架,用的是 vue3 + TS,后端返回的是文件的 url 地址,对vue后端获取 url 地址的相关知识感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
最新评论