本篇内容介绍了“vant4如何封装日期段选择器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
TimeRangePickerTypes.ts
import { ExtractPropTypes, PropType } from 'vue'import dayjs from 'dayjs'export const props = { visible: { type: Boolean, default: false }, times: { type: Array as PropType<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 }}export type Props = ExtractPropTypes<typeof props>export interface timeResult { startTime: string startMinute: string endTime: string endMinute: string}TimeRangePicker.vue
<script lang="ts" setup>import { ref, unref, watchEffect } from 'vue'import { Popup, Picker } from 'vant'import { props as TimeRangePickerProps } from './types'import { useColumns } from './composable/useColumns'const props = defineProps(TimeRangePickerProps)interface Emits { (e: 'update:visible', value: boolean): void (e: 'update:times', value: string[]): void (e: 'confirm'): void}const emits = defineEmits<Emits>()const selectedValues = ref<string[]>([])const popupVisible = ref(false)watchEffect(() => { popupVisible.value = props.visible if (props.times.length !== 2) throw new Error('时间格式错误') const startTimes = props.times[0].split(':') const endTimes = props.times[1].split(':') if (startTimes.length !== 2) throw new Error('开始时间格式错误') else if (endTimes.length !== 2) throw new Error('结束时间错误') selectedValues.value = [startTimes[0], startTimes[1], props.apart, endTimes[0], endTimes[1]]})const { columns } = useColumns(props)const onPopupClose = () => { emits('update:visible', false)}const onConfirm = () => { const onValue = unref(selectedValues.value).filter((item) => item !== props.apart) emits('update:times', [`${onValue[0]}:${onValue[1]}`, `${onValue[2]}:${onValue[3]}`]) emits('confirm') onPopupClose()}</script><template> <Popup v-model:show="popupVisible" position="bottom" @close="onPopupClose"> <Picker v-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'export function useColumns(props: Props) { const times = computed(() => { const result: PickerOption[] = [] for (let i = props.minTime; i <= props.maxTime; i++) { const v = `${i}`.padStart(2, '0') result.push({ text: v, value: v }) } return result }) const minutes = computed(() => { const result: PickerOption[] = [] for (let i = props.minMinute; i <= props.maxMinute; i++) { const v = `${i}`.padStart(2, '0') result.push({ text: v, value: v }) } return result }) const columns = ref<PickerOption[][]>([ times.value, minutes.value, [{ text: props.apart, value: props.apart }], times.value, minutes.value ]) return { columns }}使用
<script setup lang="ts">import { ref } from 'vue'import { TimeRangePicker } from './components'const visible = ref(false)const times = ref(['10:10', '12:10'])const onConfirm = () => { console.log('选择的时间是', times.value)}</script><template> <div> <van-button type="primary" @click="visible = true">选择日期</van-button> <time-range-picker v-model:visible="visible" v-model:times="times" :max-time="23" @confirm="onConfirm" ></time-range-picker> </div></template>效果
“vant4如何封装日期段选择器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
