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>高级特性集成
- 缩放功能：通过调整interval属性实现不同时间粒度
- 拖拽选择：结合mouse事件实现时间段选择
- 时区支持：添加时区转换计算
- 主题定制：通过CSS变量实现主题切换
// 缩放控制示例
zoomIn() {
this.interval = Math.max(5, this.interval / 2);
},
zoomOut() {
this.interval = Math.min(60, this.interval * 2);
}性能优化建议
对于长时段高精度时间轴：
- 使用虚拟滚动技术避免渲染过多DOM
- 对静态刻度使用CSS transform替代top定位
- 对频繁更新的当前时间指示器进行节流处理
以上方案可根据实际需求组合使用，核心思路是通过数据驱动生成刻度布局，结合CSS实现可视化效果，通过事件处理实现交互功能。
