[JavaScript知识库]vant 2 :Picker 选择器 自定义时间选择器(年+月)

1.自定义设置起始年份

2.默认选择当前年月

3.可自定义确认取消按钮

样式:

?代码演示(vue2):

<template>
  <div class="number">
    <van-picker
      class="picker"
      show-toolbar
      :columns="columns"
      @change="onChange"
    >
      <slot name="cancel"><div @click="onCancel">自定义取消</div> </slot>
      <slot name="title"> 标题 </slot>
      <slot name="confirm"> <div @click="onConfirm">自定义确认</div> </slot>
    </van-picker>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data () {
    return {
      columns: [],
      checkTime: {}
    }
  },
  created () {
    this.initTimeFn()
    console.log(this.columns)
  },
  methods: {
    initTimeFn () {
      const initTime = 2020
      for (let i = 0; i <= Number(new Date().getFullYear()) - initTime; i++) {
        this.checkTime[`${initTime + i}年`] = [
          '01月',
          '02月',
          '03月',
          '04月',
          '05月',
          '06月',
          '07月',
          '08月',
          '09月',
          '10月',
          '11月',
          '12月',
          '全部'
        ]
      }

      this.checkTime['全部'] = ['全部']
      this.columns = [
        {
          values: Object.keys(this.checkTime),
          defaultIndex: Number(new Date().getFullYear()) - initTime
        },
        {
          values: this.checkTime[`${new Date().getFullYear()}年`],
          defaultIndex: new Date().getMonth()
        }
      ]
    },
    onCancel () {},
    onConfirm () {},
    onChange (picker, values) {
      picker.setColumnValues(1, this.checkTime[values[0]])
    }
  }
}
</script>

<style lang="less">
.number {
  .picker {
    border: 1px solid pink;
  }
}
</style>