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>
实现效果如图所示
