时间选择器

架构

├── src
│   ├── components
│   │   ├── chooseTime
│   │   │      ├── lib (引入的第三方库)
│   │   │      │    └── xxx.json
│   │   │      ├── src (源码)
│   │   │      │   ├── index.vue
│   │   │      ├── index.ts

index.ts

import { type App } from 'vue'
import chooseTime from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
    install(app: App) {
        app.component('YJ-choose-time', chooseTime)
    }
}

interface/chooseTime/type.ts

• 定义chooseTime组件的props类型

export interface IChoosTime {
    // 开始时间的占位符
    startPlaceholder: string
    // 结束时间的占位符
    endPlaceholder: string
    // 开始时间的开始选择
    startTimeStart: string
    // 开始时间的步进
    startStep: string
    // 开始时间的结束选择
    startTimeEnd: string
    // 结束时间的开始选择
    endTimeStart: string
    // 结束时间的步进
    endStep: string
    // 结束时间的结束选择
    endTimeEnd: string
}

hooks/chooseTime/useTime.ts

import { ref, watch } from 'vue'
export const useTime = (emits: any) => {
    // 开始时间
    let startTime = ref<string>('')
    // 结束时间
    let endTime = ref<string>('')
    // 是否禁用结束时间
    let endTimeDisabled = ref<boolean>(true)
    console.log(emits)
    // 监听开始时间的变化
    watch(
        () => startTime.value,
        val => {
            if (val === '') {
                endTime.value = ''
                endTimeDisabled.value = true
            } else {
                console.log(emits)
                endTimeDisabled.value = false
                // 给父组件分发事件
                emits('startChange', val)
            }
        }
    )
    // 监听结束时间的变化
    watch(
        () => endTime.value,
        val => {
            if (val !== '') {
                emits('endChange', {
                    startTime: startTime.value,
                    endTime: val
                })
            }
        }
    )
    return {
        startTime,
        endTime,
        endTimeDisabled
    }
}

components/chooseTime/src/index.vue

<template>
    <div style="display: flex">
        <div style="margin-right: 20px">
            <el-time-select
                v-model="useTimeData.startTime.value"
                :placeholder="data.startPlaceholder"
                :start="data.startTimeStart"
                :step="data.startStep"
                :end="data.startTimeEnd"
            ></el-time-select>
        </div>
        <div>
            <el-time-select
                v-model="useTimeData.endTime.value"
                :min-time="useTimeData.startTime.value"
                :placeholder="data.endPlaceholder"
                :start="data.endTimeStart"
                :step="data.endStep"
                :end="data.endTimeEnd"
                :disabled="useTimeData.endTimeDisabled.value"
            ></el-time-select>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { type IChoosTime } from '@/interfaces/chooseTime/type'
    import { useTime } from '@/hooks/chooseTime/useTime'
    const emits = defineEmits(['startChange', 'endChange'])
    const useTimeData = useTime(emits)
    const props = withDefaults(
        defineProps<{
            data: IChoosTime
        }>(),
        {
            data: () => ({
                startPlaceholder: '请选择开始时间',
                endPlaceholder: '请选择结束时间',
                startTimeStart: '08:00',
                startStep: '00:30',
                startTimeEnd: '24:00',
                endTimeStart: '08:00',
                endStep: '00:30',
                endTimeEnd: '24:00'
            }),
            required: false
        }
    )
</script>

<style scoped lang="scss"></style>