当前位置：首页 > VUE

vue实现时间刻度

2026-02-21 14:46:36VUE

Vue 实现时间刻度组件

时间刻度组件常用于时间轴、日历或日程管理类应用。以下是基于 Vue 的实现方法：

基础时间刻度实现

使用 v-for 循环生成时间刻度，结合 CSS 进行样式控制：

<template>
  <div class="time-scale">
    <div 
      v-for="hour in 24" 
      :key="hour" 
      class="time-mark"
      :style="{ left: `${(hour-1) * 4.166}%` }"
    >
      {{ hour-1 }}:00
    </div>
  </div>
</template>

<style scoped>
.time-scale {
  position: relative;
  height: 40px;
  border-bottom: 1px solid #eee;
}

.time-mark {
  position: absolute;
  transform: translateX(-50%);
  padding-top: 5px;
  border-left: 1px solid #ccc;
  height: 15px;
}
</style>

可缩放时间刻度

添加缩放功能，通过计算属性动态调整刻度密度：

vue实现时间刻度

export default {
  data() {
    return {
      zoomLevel: 1, // 1-5级缩放
      hours: 24
    }
  },
  computed: {
    visibleHours() {
      return this.hours / Math.pow(2, this.zoomLevel - 1)
    },
    stepWidth() {
      return 100 / this.visibleHours
    }
  },
  methods: {
    zoomIn() {
      if (this.zoomLevel < 5) this.zoomLevel++
    },
    zoomOut() {
      if (this.zoomLevel > 1) this.zoomLevel--
    }
  }
}

带时间段的刻度

实现时间段高亮显示功能：

<template>
  <div class="time-ruler">
    <div 
      v-for="segment in timeSegments" 
      :key="segment.start"
      class="time-segment"
      :style="{
        left: `${calcPosition(segment.start)}%`,
        width: `${calcWidth(segment.start, segment.end)}%`
      }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    segments: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    calcPosition(time) {
      const [hours, minutes] = time.split(':')
      return (parseInt(hours) * 60 + parseInt(minutes)) / 14.4
    },
    calcWidth(start, end) {
      return this.calcPosition(end) - this.calcPosition(start)
    }
  }
}
</script>

交互式时间刻度

添加点击事件处理，允许用户选择时间点：

vue实现时间刻度

methods: {
  handleClick(event) {
    const rect = this.$el.getBoundingClientRect()
    const percent = (event.clientX - rect.left) / rect.width
    const totalMinutes = Math.round(percent * 1440)
    const hours = Math.floor(totalMinutes / 60)
    const minutes = totalMinutes % 60
    this.$emit('time-selected', `${hours}:${minutes}`)
  }
}

性能优化建议

对于长时间跨度的刻度渲染，使用虚拟滚动技术：

export default {
  data() {
    return {
      visibleRange: [0, 24],
      totalHours: 168 // 一周的小时数
    }
  },
  computed: {
    visibleHours() {
      return Array.from(
        { length: this.visibleRange[1] - this.visibleRange[0] },
        (_, i) => this.visibleRange[0] + i
      )
    }
  }
}