pc-component-v5/packages/year-picker/src/YearPicker.vue

<template>
  <select
    v-model="year"
    class="m-select form-control"
    :readonly="readonly"
    style="width:100%"
  >
    <option
      v-for="item in years"
      :key="item"
      :value="item"
    >
      {{ item }}
    </option>
  </select>
</template>

<script>

export default {
  name: 'YearPicker',
  props: {
    'modelValue':
    {
      type: String,
      default: '',
    }, 
    'readonly':{
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:modelValue'],
  data: function () {
    return {
      start: 1990,
      end: 2050,
      years: [],
      year: '',
    };
  },
  watch: {
    'year': function () {
      this.$emit('update:modelValue', this.year);
    },

    'modelValue': {
      handler: function (newValue, oldValue) { // eslint-disable-line
        this.year = newValue;
      },
      immediate: true,
    },
  },
  mounted: function () {
    this.initYear();
  },
  methods: {
    /**
             * 初始化时间年份列表
             */
    initYear: function () {
      var _self = this;
      if (!_self.end) {
        _self.end = new Date().getFullYear();
      }
      for (var i = _self.start; i <= _self.end; i++) {
        _self.years.push(i);
      }
      _self.years.sort(function (a, b) {
        return b - a;
      });
    },

    /**
             * 判断年份是否存在，如果年不存在就添加
             */
    checkYear: function (value) {
      if (value != null && value.length == 4 && this.years.indexOf(value) < 0) {
        this.years.push(value);
      }
    },
  },
};

</script>

<style scoped>
.m-select {
    border-radius: 4px !important;
}
</style>