<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>

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