vue3 时间轴选择某个时间段

vue3时间轴选择某段时间

支持选择多段时间

页面

 <div v-for="(item, idx) in color">
            <span
              style="width: 10px; height: 10px;display: inline-block;border-radius: 50%;"
              :style="{ background:item }"
            ></span>
            <span style="color: #000">第{{ idx + 1 }}次</span>
            <el-time-picker
              v-model="ruleForm[idx]"
              is-range
              format="HH:mm"
              value-format="x"
              style="width: 190px"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>
          <time-ruler
            style="width: 100%"
            v-model="ruleForm"
          ></time-ruler>

import timeRuler from "./timeRuler.vue";
const color = ["#FFDA23","#95EFFF", "#37FFDD", "#2475FF", "#FF986B", "#C0FF6B", "#FFDA23", "#95EFFF", "#37FFDD", "#2475FF", "#FF986B", "#C0FF6B",];
let ruleForm = ref([])

组件

<template>
  <div class="time-ruler">
    <div class="line0"></div>
    <div v-for="(item, idx) in ruleData" class="time-name">
      <div class="line" v-if="idx < 23">
        <div class="line-border"></div>
        <div
          class="line-1"
          v-for="(v, index) in props.modelValue"
          :style="{
            background: getStyle(item, index, 'background'),
            backgroundSize: getStyle(item, index, 'backgroundSize'),
          }"
        ></div>
      </div>
      <div class="name" v-if="item % 2 == 0">{{ item }}:00</div>
    </div>
    <div class="time-name1">
      <div class="line0"><div class="line-1"></div></div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  modelValue: [String],
});
const color = [  "#FFDA23", "#95EFFF", "#37FFDD", "#2475FF", "#FF986B",  "#C0FF6B", "#FFDA23", "#95EFFF", "#37FFDD",  "#2475FF",  "#FF986B",  "#C0FF6B",];
const ruleData = [  "08",  "09",  "10",  "11","12",  "13",  "14",  "15",  "16",  "17",  "18",  "19",  "20",  "21",  "22",  "23",  "00",  "01",  "02",  "03",  "04",  "05",  "06",  "07",];

function getStyle(time, index, type) {
  let background = "";
  let backgroundSize = "";
  const modelValue = props.modelValue[index];
  if (!modelValue) {
    return;
  }
  const hoursStart = new Date(modelValue[0]).getHours();
  const hoursEnd = new Date(modelValue[1]).getHours();
  const minutesStart = new Date(modelValue[0]).getMinutes();
  const minutesEnd = new Date(modelValue[1]).getMinutes();
  if (hoursStart <= time * 1 && hoursEnd > time * 1) {
    if (hoursStart === time * 1 && minutesStart > 0) {
      const percentage = 100 - (minutesStart / 60) * 100;
      backgroundSize = `${percentage}% 100%`;
      background = `linear-gradient(${color[index]},${color[index]}) right no-repeat`;
    } else {
      background = color[index];
    }
  }
  if (time - hoursEnd === 0 && minutesEnd !== 0) {
    const percentage = (minutesEnd / 60) * 100;
    backgroundSize = `${percentage}% 100%`;
    background = `linear-gradient(${color[index]},${color[index]}) left no-repeat`;
  }

  if (time - hoursEnd === 0 && minutesEnd === 0) {
    backgroundSize = `0`;
    background = `linear-gradient(${color[index]},${color[index]}) left no-repeat`;
  }
  if (type === "background") {
    return background;
  } else {
    return backgroundSize;
  }
}
</script>

<style lang="scss" scoped>
.time-ruler {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  font-size: 10px;
  .time-name {
    position: relative;
    .name {
      position: absolute;
      bottom: -8px;
      left: -15px;
      color: #000;
    }
  }
  .line {
    width: 30px;
    height: 26px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    position: relative;
    .line-border {
      border-left: 1px solid #dbdbdb;
      height: 100%;
      z-index: 11;
      position: relative;
    }
    .line-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.65;
    }
  }

  .line0 {
    width: 20px;
    height: 26px;
    margin-bottom: 5px;
    border-bottom: 1px solid #dbdbdb;
    .line-1 {
      border-left: 1px solid #dbdbdb;
      height: 100%;
    }
  }
}
</style>