vant4如何封装日期段选择器(云服务器、云主机、高防IP、高防服务器、香港服务器、美国服务器,开发技术)

TimeRangePickerTypes.ts

import{ExtractPropTypes,PropType}from'vue'importdayjsfrom'dayjs'exportconstprops={/**窗口是否显示*/visible:{type:Boolean,default:false},/**时间段，[HH:mm,HH:mm]*/times:{type:ArrayasPropType<string[]>,default:()=>[dayjs().format('HH-mm'),dayjs().format('HH-mm')]},/**中间分隔符*/apart:{type:String,default:'~'},/**最大时间*/maxTime:{type:Number,default:23},/**最小时间*/minTime:{type:Number,default:1},/**最大分钟数*/maxMinute:{type:Number,default:59},/**最小分钟数*/minMinute:{type:Number,default:1}}exporttypeProps=ExtractPropTypes<typeofprops>exportinterfacetimeResult{/**开始时间*/startTime:string/**开始分钟*/startMinute:string/**结束时间*/endTime:string/**结束分钟*/endMinute:string}

TimeRangePicker.vue

<scriptlang="ts"setup>import{ref,unref,watchEffect}from'vue'import{Popup,Picker}from'vant'import{propsasTimeRangePickerProps}from'./types'import{useColumns}from'./composable/useColumns'constprops=defineProps(TimeRangePickerProps)interfaceEmits{/*显示窗口*/(e:'update:visible',value:boolean):void/*更新时间段*/(e:'update:times',value:string[]):void/**确认事件*/(e:'confirm'):void}constemits=defineEmits<Emits>()/**选择的值*/constselectedValues=ref<string[]>([])/**窗口是否显示*/constpopupVisible=ref(false)watchEffect(()=>{popupVisible.value=props.visibleif(props.times.length!==2)thrownewError('时间格式错误')/**开始时间分秒*/conststartTimes=props.times[0].split(':')/**结束时间分秒*/constendTimes=props.times[1].split(':')if(startTimes.length!==2)thrownewError('开始时间格式错误')elseif(endTimes.length!==2)thrownewError('结束时间错误')selectedValues.value=[startTimes[0],startTimes[1],props.apart,endTimes[0],endTimes[1]]})const{columns}=useColumns(props)/**选择时间段取消事件*/constonPopupClose=()=>{emits('update:visible',false)}/**确定按钮单击事件*/constonConfirm=()=>{constonValue=unref(selectedValues.value).filter((item)=>item!==props.apart)emits('update:times',[`${onValue[0]}:${onValue[1]}`,`${onValue[2]}:${onValue[3]}`])emits('confirm')onPopupClose()}</script><template><Popupv-model:show="popupVisible"position="bottom"@close="onPopupClose"><Pickerv-bind="$attrs"v-model="selectedValues":columns="columns"@confirm="onConfirm"@cancel="onPopupClose"/></Popup></template>

useColumns.ts

import{computed,ref}from'vue'import{PickerOption}from'vant'import{Props}from'../types'exportfunctionuseColumns(props:Props){/**时段*/consttimes=computed(()=>{constresult:PickerOption[]=[]for(leti=props.minTime;i<=props.maxTime;i++){constv=`${i}`.padStart(2,'0')result.push({text:v,value:v})}returnresult})/**分钟*/constminutes=computed(()=>{constresult:PickerOption[]=[]for(leti=props.minMinute;i<=props.maxMinute;i++){constv=`${i}`.padStart(2,'0')result.push({text:v,value:v})}returnresult})/**显示列*/constcolumns=ref<PickerOption[][]>([times.value,minutes.value,[{text:props.apart,value:props.apart}],times.value,minutes.value])return{columns}}

使用

<scriptsetuplang="ts">import{ref}from'vue'import{TimeRangePicker}from'./components'constvisible=ref(false)consttimes=ref(['10:10','12:10'])constonConfirm=()=>{console.log('选择的时间是',times.value)}</script><template><div><van-buttontype="primary"@click="visible=true">选择日期</van-button><time-range-pickerv-model:visible="visible"v-model:times="times":max-time="23"@confirm="onConfirm"></time-range-picker></div></template>

效果