温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-04-12 13:38:53 来源:亿速云 阅读:375 作者:iii 栏目:开发技术

这篇文章主要介绍了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>

页面效果:

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

解决方法

仔细阅读官网文档,发现了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封装年份怎么选择组件

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI