必备UI组件
将用到的组件:
TimeSelect 时间选择
时间选择
新建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
评论: