记录第一次封装antdesign 年份选择器~

最新推荐文章于 2024-03-01 19:13:21 发布

fly_dragonkunkun

最新推荐文章于 2024-03-01 19:13:21 发布

阅读量276

点赞数

文章标签： Vue 组件年份选择器 moment.js 事件处理

本文链接：https://blog.csdn.net/qq_41247477/article/details/126368555

版权

<template>
  <div class="yearPicker">
    <a-date-picker
      format="YYYY"
      mode="year"
      :value="momVal"
      :open="open"
      @openChange="openChange"
      @panelChange="panelChange"
    />
  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: 'JYear',

    props: {
    value: {
      type: String,
      required: false,
    }  
    },
  data() {
    let dateStr = this.value;
    return{
      momVal:!dateStr?null:moment(dateStr,"YYYY"),
      open : false
    }
  },

  methods: {
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    panelChange(val) {
      this.momVal = val.format('YYYY')
      this.$emit('change', this.momVal);
      this.open = false
    },
  },
      model: {
      prop: 'value',
      event: 'change'
    }
}
</script>

总的来说不是很难，踩了一些框架封装的坑