vant4 封裝日期段選擇器的實現(xiàn)

更新時間：2023年03月01日 11:10:30 作者：請叫我彭彭

本文主要介紹了vant4 封裝日期段選擇器的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

偶然間在群里看到一個小伙伴的需求，需要使用vant 封裝時間段選擇器，看到這個需求后，自己也想實現(xiàn)一下，說干就干！倉庫地址

TimeRangePickerTypes.ts

import { ExtractPropTypes, PropType } from 'vue'
import dayjs from 'dayjs'
export const props = {
    /** 窗口是否顯示 */
    visible: {
        type: Boolean,
        default: false
    },
    /** 時間段，[HH:mm,HH:mm] */
    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
    },
    /** 最大分鐘數(shù) */
    maxMinute: {
        type: Number,
        default: 59
    },
    /** 最小分鐘數(shù) */
    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>