Vant 倒序年月日期选择器组件封装实战

<template>
  <div class="number">
    <van-cell-group>
      <van-field class="date-select" readonly clickable v-model="date" placeholder="选择时间"
        @click="showPicker = true" />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker class="picker" show-toolbar :columns="columns" @change="onChange"
          @cancel="showPicker = false" @confirm="onConfirm">
        </van-picker>
      </van-popup>
    </van-cell-group>
  </div>
</template>
  <script>
export default {
  name: 'DateSelect',
  props: {
    default: {
      type: String,
      default: ''
    },
    minYear: {
      type: String,
      default: '2014'
    }
  },
  data() {
    return {
      date: this.default,
      initTime: this.minYear,
      columns: [],
      checkTime: {},
      showPicker: false
    }
  },
  created() {
    this.initTimeFn()
  },
  methods: {
    initTimeFn() {
      const initTime = this.initTime
      const defaultYear = this.default.substring(0, 4)
      const defaultMonth = this.default.substring(4)
      // for (let i = 0; i <= Number(new Date().getFullYear()) - initTime; i++) {
      for (let i = Number(new Date().getFullYear()); i >= initTime; i--) {
        this.checkTime[`${i}年`] = [
          '01月',
          '02月',
          '03月',
          '04月',
          '05月',
          '06月',
          '07月',
          '08月',
          '09月',
          '10月',
          '11月',
          '12月'
        ]
      }
      const yearIndex = Object.keys(this.checkTime).findIndex((item) =>
        item.includes(defaultYear)
      )
      this.columns = [
        {
          values: Object.keys(this.checkTime),
          defaultIndex: yearIndex //Number(new Date().getFullYear()) - initTime
        },
        {
          values: this.checkTime[`${new Date().getFullYear()}年`],
          defaultIndex: Number(defaultMonth) //new Date().getMonth()
        }
      ]
    },
    onCancel() {
      this.showPicker = false
    },
    onConfirm(value) {
      this.showPicker = false
      let year = value && value[0].split('年')[0]
      let month = value && value[1].split('月')[0]
      this.date = this.userListForm = `${year}${month}`
      this.$emit('getDate', this.userListForm)
    },
    onChange(picker, values) {
      picker.setColumnValues(1, this.checkTime[values[0]])
    }
  }
}
</script>
  <style lang="less">
.number {
  width: 2.4rem;
  .picker {
    font-size: 0.32rem;
  }
  .van-cell {
    padding: 0;
  }
  .date-select {
    border: 1px solid rgb(74, 119, 246);
    padding-left: 0.1rem;
    border-radius: 0.1rem;
    font-size: 0.32rem;
    line-height: 1.5;
  }
}
</style>

  <DateSelect @getDate="getDate" default="202312" />

  getDate(date) {
      this.date = date    //自己组件使用的时间变量
      this.getList()
    },