移动端vant时间选择器选择年份组件封装

因为vantUI 提供的时间选择器没有提供选择年份的组件，这里对选择年份组件进行封装，要点：Field 输入框+ActionSheet 动作面板+DatetimePicker 时间选择 组合使用。

<van-field
        v-model="queryParams.taskYear"
        is-link
        readonly
        arrow-direction="down"
        label="年份"
        placeholder="请选择年份"
        @click="dateSelect"
      />
      <van-action-sheet v-model="yearShow">
        <van-picker
          title="请选择年份"
          show-toolbar
          :columns="yearColumns"
          :default-index="yearSelect"
          @confirm="yearConfirm"
          @cancel="cancel"
        />
</van-action-sheet>

export default {
    data() {
        return {
            // 查询参数
            queryParams: {
                taskYear: null,
            },
            yearSelect: null,
            yearColumns: [],
            yearShow:false // 年份
        }
}

created() {
    this.yearData();
},

methods: {
      formatDates(date) {
        return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
      },
      // 监听年份打开
      dateSelect() {
        this.yearShow = true;
      },
      //年选择器
      yearConfirm(value) {
        this.queryParams.taskYear = value.toString();
        this.yearShow = false;
      },
      //年数据
      yearData() {
        // 获取默认显示的时间
        var nowTime = new Date(this.queryParams.taskYear);
        let year = nowTime.getFullYear();
        let month = nowTime.getMonth();
        let day = nowTime.getDate();
        // 循环数组 填写最小时间和最大时间范围 推进数组
        for (let i = 2000; i < 2099; i++) {
          this.yearColumns.push(i);
        }
        // 格式化时间并截取
        var years = this.formatDates( new Date(year, month ,day));
        var Year = years.slice(0,4);
        // 将截取的年份赋值给绑定值 用于点击弹出日期窗口后显示当前的时间
        this.yearSelect = this.yearColumns.indexOf(Number(Year));
      },
      // 点击取消按钮时触发的事件
      cancel() {
        this.yearShow = false;
      },
}