60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
||
<div style="display: flex; align-items: center">
|
||
<span>预约时间段：</span>
|
||
<!-- <el-form-item label="" prop="time">-->
|
||
<!-- 开始时间选择 -->
|
||
<el-time-picker
|
||
v-model="startTime"
|
||
format="HH:mm"
|
||
placeholder="开始时间"
|
||
@change="onTimeChange"
|
||
:minute-step="1"
|
||
:hour-step="1"
|
||
size="default"
|
||
style="width: 100px; margin-right: 10px"
|
||
/>
|
||
<!-- 结束时间选择 -->
|
||
<el-time-picker
|
||
v-model="endTime"
|
||
format="HH:mm"
|
||
placeholder="结束时间"
|
||
@change="onTimeChange"
|
||
:minute-step="1"
|
||
:hour-step="1"
|
||
size="default"
|
||
style="width: 100px"
|
||
/>
|
||
|
||
<!-- </el-form-item>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {onMounted, ref} from 'vue'
|
||
import emitter from "@/utils/emitter";
|
||
import dayjs from "dayjs";
|
||
|
||
const startTime = ref('')
|
||
const endTime = ref('')
|
||
|
||
// 处理时间选择变化
|
||
|
||
onMounted(() => {
|
||
emitter.on('clearTimeSlot', () => {
|
||
startTime.value = ''
|
||
endTime.value = ''
|
||
})
|
||
})
|
||
|
||
const onTimeChange = (e:any) => {
|
||
if (startTime.value && endTime.value) {
|
||
const time = dayjs(startTime.value).format('HH:mm') + "-" + dayjs(endTime.value).format('HH:mm')
|
||
emitter.emit('getTimeSlot', time)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|