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>
|