【Vue3+Vite+TS】11.0 组件八：时间选择组件

必备UI组件

将用到的组件：
TimeSelect 时间选择

DatePicker 日期选择器

时间选择

新建src\components\baseline\chooseTime\src\index.vue

<template>
    <div class="bs-wrapper">
        <div class="box">
            <!-- :max-time="endTime" -->
            <el-time-select
                v-bind="$attrs.startOptions"
                v-model="startTime"
                :placeholder="startPlaceholder"
                :start="startTimeStart"
                :step="startStep"
                :end="startTimeEnd"
            ></el-time-select>
        </div>
        <div class="box">
            <el-time-select
                v-bind="$attrs.endOptions"
                v-model="endTime"
                :min-time="startTime"
                :placeholder="endPlaceholder"
                :start="endTimeStart"
                :step="endStep"
                :end="endTimeEnd"
                :disabled="endTimeDisabled"
            ></el-time-select>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    //说明：开始时间提示
    startPlaceholder: {
        type: String,
        default: '请选择开始时间',
    },
    //说明：开始时间的默认开始选择
    startTimeStart: {
        type: String,
        default: '00:00',
    },
    // 说明：开始时间时间间隔
    startStep: {
        type: String,
        default: '00:30',
    },
    //说明：开始时间的默认结束选择
    startTimeEnd: {
        type: String,
        default: '24:00',
    },

    //说明：结束时间提示
    endPlaceholder: {
        type: String,
        default: '请选择结束时间',
    },
    //说明：结束时间的默认开始选择
    endTimeStart: {
        type: String,
        default: '00:00',
    },
    // 说明：结束时间时间间隔
    endStep: {
        type: String,
        default: '00:30',
    },
    //说明：结束时间的默认结束选择
    endTimeEnd: {
        type: String,
        default: '24:00',
    },
})

//子传父
let emits = defineEmits(['startChange', 'endChange'])
// 开始时间
const startTime = ref<st