AntDesignVue的年度选择组件

<template>
  <a-date-picker
    mode="year"
    format="YYYY"
    :value="value"
    :open="isopen"
    :placeholder="placeholder"
    :disabled="disabled"
    @focus="changeopen"
    @panelChange="handlePanelChange">
  </a-date-picker>
</template>

<script>
export default {
  name: 'JYearPicker',
  props:{
    value: {
      type: String,
      required: false,
      default: null
    },
    placeholder: {
      type: String,
      required: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data(){
    return {
      isopen: false
    }
  },
  methods:{
    handlePanelChange(value) {
      this.isopen = false
      this.$emit("change", value.format("YYYY"))
    },
    changeopen() {
      this.isopen = true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped>

</style>

To Be Continued！😎