星期-时间范围选择器 滑动选择时间 最小粒度 vue3

根据业务需要，实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段，并且可以通过快速选择组件来快速选择特定的时间范围。

功能介绍

1. 时间范围选择：用户可以通过鼠标拖动来选择时间段。
2. 快速选择：提供快速选择组件，用户可以通过点击快速选择特定的时间范围，如上午、下午、工作日、周末等。
3. 自定义样式：可以通过selectionColor 属性自定义选中区域的颜色。
4. 数据绑定：通过 modelValue属性与父组件进行数据绑定，实时更新选择的时间范围。

属性说明

modelValue：绑定的时间范围数据，类型为数组。
selectionColor：选中区域的颜色，类型为字符串，默认为 ‘rgba(5, 146, 245, 0.6)’。
showQuickSelect：是否显示快速选择组件，类型为布尔值，默认为 true。

事件说明

update:modelValue：当选择的时间范围发生变化时触发，返回更新后的时间范围数据。

实现代码

index.vue

<template><div class="zt-weektime"><div :class="{ 'zt-schedule-notransi': mode }" :style="[styleValue, { backgroundColor: selectionColor }]" class="zt-schedule"></div><table class="zt-weektime-table"><thead class="zt-weektime-head"><tr><td class="week-td" rowspan="8"></td><td v-for="t in theadArr" :key="t" :colspan="2">{{ t }}:00</td></tr><!--        <tr>--><!--          <td v-for="t in 48" :key="t" class="half-hour">--><!--            {{ t % 2 === 0 ? "00" : "30" }}--><!--          </td>--><!--        </tr>--></thead><tbody class="zt-weektime-body"><tr v-for="t in weekData" :key="t.row"><td>{{ t.value }}</td><tdv-for="n in t.child":key="`${n.row}-${n.col}`":class="['weektime-atom-item', { selected: isSelected(n) }]":data-time="n.col":data-week="n.row":style="{ '--selection-color': selectionColor }"@mousedown="cellDown(n)"@mouseenter="cellEnter(n)"@mouseup="cellUp(n)"></td></tr><tr><td class="zt-weektime-preview" colspan="49"><QuickSelect v-if="showQuickSelect" style="padding: 10px 0" @select="handleQuickSelect" /><!--            <div class="g-clearfix zt-weektime-con">--><!--              <span class="g-pull-left">{{ hasSelection ? "已选择时间段" : "可拖动鼠标选择时间段" }}</span>--><!--            </div>--><!--            <div v-if="hasSelection" class="zt-weektime-time">--><!--              <div v-for="(ranges, week) in formattedSelections" :key="week">--><!--                <p v-if="ranges.length">--><!--                  <span class="g-tip-text">{{ week }}：</span>--><!--                  <spa