vue实现时间刻度

Vue实现时间刻度组件

时间刻度组件常用于时间轴、日程管理或数据可视化场景。以下是基于Vue的实现方案：

基础时间刻度实现

使用v-for循环生成刻度元素，结合CSS实现布局：

<template>
  <div class="time-scale">
    <div 
      v-for="(hour, index) in 24" 
      :key="index"
      class="scale-hour"
    >
      <span class="hour-label">{{ hour }}:00</span>
      <div class="minor-ticks">
        <div 
          v-for="minor in 3" 
          :key="minor"
          class="minor-tick"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.time-scale {
  display: flex;
  flex-direction: column;
  height: 1440px; /* 24小时*60分钟 */
}

.scale-hour {
  flex: 1;
  position: relative;
  border-bottom: 1px solid #ccc;
}

.hour-label {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
}

.minor-ticks {
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  height: 100%;
}

.minor-tick {
  height: 25%; /* 15分钟间隔 */
  border-bottom: 1px solid #eee;
}
</style>

动态时间范围刻度

支持可配置的时间范围和间隔：

export default {
  props: {
    startHour: { type: Number, default: 8 },
    endHour: { type: Number, default: 20 },
    interval: { type: Number, default: 30 } // 分钟间隔
  },
  computed: {
    timePoints() {
      const points = [];
      const totalMinutes = (this.endHour - this.startHour) * 60;

      for (let i = 0; i <= totalMinutes; i += this.interval) {
        const hours = Math.floor(i / 60) + this.startHour;
        const mins = i % 60;
        points.push({
          time: `${hours}:${mins < 10 ? '0' + mins : mins}`,
          isHour: mins === 0
        });
      }
      return points;
    }
  }
}

交互式时间刻度

添加点击事件和当前时间指示：

<template>
  <div class="interactive-scale">
    <div 
      v-for="point in timePoints"
      :key="point.time"
      :class="['time-marker', { 'hour-marker': point.isHour }]"
      @click="handleTimeClick(point.time)"
    >
      <span v-if="point.isHour">{{ point.time }}</span>
    </div>
    <div 
      class="current-time" 
      :style="currentTimePosition"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date()
    };
  },
  mounted() {
    this.updateCurrentTime();
    this.timer = setInterval(this.updateCurrentTime, 60000);
  },
  methods: {
    updateCurrentTime() {
      this.currentTime = new Date();
    },
    handleTimeClick(time) {
      this.$emit('time-selected', time);
    }
  },
  computed: {
    currentTimePosition() {
      const hours = this.currentTime.getHours();
      const mins = this.currentTime.getMinutes();
      const totalMinutes = (hours - this.startHour) * 60 + mins;
      const top = (totalMinutes / ((this.endHour - this.startHour) * 60)) * 100;
      return { top: `${top}%` };
    }
  }
}
</script>

高级特性集成

1. 缩放功能：通过调整interval属性实现不同时间粒度
2. 拖拽选择：结合mouse事件实现时间段选择
3. 时区支持：添加时区转换计算
4. 主题定制：通过CSS变量实现主题切换

// 缩放控制示例
zoomIn() {
  this.interval = Math.max(5, this.interval / 2);
},
zoomOut() {
  this.interval = Math.min(60, this.interval * 2);
}

性能优化建议

对于长时段高精度时间轴：

• 使用虚拟滚动技术避免渲染过多DOM
• 对静态刻度使用CSS transform替代top定位
• 对频繁更新的当前时间指示器进行节流处理

以上方案可根据实际需求组合使用，核心思路是通过数据驱动生成刻度布局，结合CSS实现可视化效果，通过事件处理实现交互功能。