Ant Design Vue 进行年度选择

最新推荐文章于 2024-07-22 11:04:21 发布

Hello.鑫

最新推荐文章于 2024-07-22 11:04:21 发布

阅读量887

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44037153/article/details/136078394

版权

<a-date-picker
            style="width: 100px"
            placeholder="请选择年"
            mode="year"
            v-model="selectedYear"
            :open="dataopen"
            format="YYYY"
            :allowClear="false"
            @openChange="openChangeYear"
            @panelChange="panelChangeYear"
          />

定义变量

 selectedYear: '', //选择的年份
 dataopen: false,

方法

// 点击选择框事件 弹出日期组件选择年
    openChangeYear(status) {
      if (status) {
        this.dataopen = true
      } else {
        this.dataopen = false
      }
    },
    // 选择年之后 关闭弹框
    panelChangeYear(value) {
      this.selectedYear = moment(value).format('YYYY')
      this.dataopen = false
    },

注意：需要引入moment，没有安装的需要安装一下。