vant组件，picker时间选择，自定义时间选择，实现datePacker，时间选择长期，增加长期选项，用于选择身份证到期时间等...

vant组件，picker时间选择，自定义时间选择，实现datePacker，时间选择长期，增加长期选项，用于选择身份证到期时间等...

最近项目中有个需求，datePicker选项，需要实现增加一个长期的选中项，用于选择身份证到期时间，思考良久，只能通过自定义的方式进行实现

<template>
  <van-picker ref="picker" :columns="datas" @change="onChange" />
</template>
<script setup>
  const picker = ref(null);
  const current = ref([])
  const setYears = ()=>{
      //根据需求，设置年份和月份
    const date = new Date()
    let year = date.getFullYear()
    let yearsArr = []
    //可选时间，20年后
    for(let i=0;i<=20;i++){
      yearsArr.push(`${year++}`)
    }
    //增加长期选项
    yearsArr.push('长期')
    //初始化时间
    datas.value = [
      {values:yearsArr},
      {values:['01','02','03','04','05','06','07','08','09','10','11','12']},
      {values:getDays(date.getFullYear(),date.getMonth())}
    ]
  }
    // 获取不同月份有多少天时间，返回时间数组
  const getDays = (year, month)=>{
    let daysNumber = new Date(year, month, 0).getDate()
    let daysNumberArr = []
    for(let i=1;i <= daysNumber;i++){
      daysNumberArr.push(i)
    }
    return daysNumberArr
  }
  const datas = ref({})
  // 选中项发生改变时执行
  const onChange = (values) => {
      //判断选中项，不是长期时，动态更改第三列的日期值
    current.value = values
    if(!values[0] === '长期'){
      picker.value.setColumnValues(1,['01','02','03','04','05','06','07','08','09','10','11','12']);
      picker.value.setColumnValues(2, getDays(values[0],values[1]));
    }
   
  };
  //初始化
  setYears()
  //监听，当current选中了长期时，删除多余的两列，只留下长期年份列，反之，调用初始化函数
  watch(()=>current.value,()=>{
    if(current.value.includes('长期')){
      const date = new Date()
      let year = date.getFullYear()
      let yearsArr = []
      for(let i=0;i<=20;i++){
        yearsArr.push(`${year++}`)
      }
      yearsArr.push('长期')
      datas.value = [
        {values:yearsArr}
      ]
    }else if(current.value[1] == null){
      setYears()
    }
  })
</script>

实现效果如图所示