Ant Design封装年份怎么选择组件

这篇文章主要介绍了Ant Design封装年份怎么选择组件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Ant Design封装年份怎么选择组件文章都会有所收获，下面我们一起来看看吧。

问题一

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组件的的手动输入日期是不能用的，但是不知道为什么还要弄这东西，建议开发的时候把输入框隐藏掉。

隐藏后：

关于“Ant Design封装年份怎么选择组件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Ant Design封装年份怎么选择组件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。