vue实现刻度标尺线
Vue 实现刻度标尺线的方法
使用纯 CSS 和 Vue 动态渲染
通过 Vue 的 v-for 指令动态生成刻度线，结合 CSS 控制样式和布局。以下是一个水平刻度标尺的示例：
<template>
<div class="ruler-container">
<div class="ruler">
<div
v-for="(tick, index) in ticks"
:key="index"
class="tick"
:style="{ left: `${tick.position}px` }"
>
<span class="tick-label" v-if="tick.isMajor">{{ tick.value }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ticks: [],
totalTicks: 100, // 总刻度数
majorTickInterval: 10 // 主刻度间隔
};
},
created() {
this.generateTicks();
},
methods: {
generateTicks() {
for (let i = 0; i <= this.totalTicks; i++) {
this.ticks.push({
position: i * 10, // 每个刻度间隔 10px
value: i,
isMajor: i % this.majorTickInterval === 0 // 主刻度标记
});
}
}
}
};
</script>
<style>
.ruler-container {
overflow-x: auto;
padding: 20px 0;
}
.ruler {
position: relative;
height: 50px;
width: 1000px; /* 根据刻度总数动态计算 */
border-bottom: 1px solid #333;
}
.tick {
position: absolute;
bottom: 0;
width: 1px;
background-color: #333;
}
.tick:nth-child(10n) {
height: 20px; /* 主刻度高度 */
}
.tick:not(:nth-child(10n)) {
height: 10px; /* 次刻度高度 */
}
.tick-label {
position: absolute;
bottom: -20px;
left: -10px;
font-size: 12px;
}
</style>使用 SVG 实现更灵活的标尺
SVG 适合需要复杂交互或自定义样式的场景：
<template>
<svg class="ruler-svg" width="100%" height="60">
<line
v-for="(tick, index) in ticks"
:key="index"
:x1="tick.position"
y1="0"
:x2="tick.position"
:y2="tick.isMajor ? 20 : 10"
stroke="#333"
/>
<text
v-for="(tick, index) in majorTicks"
:key="'label-' + index"
:x="tick.position"
y="35"
text-anchor="middle"
font-size="12"
>
{{ tick.value }}
</text>
</svg>
</template>
<script>
export default {
computed: {
majorTicks() {
return this.ticks.filter(tick => tick.isMajor);
}
}
};
</script>实现可拖拽交互标尺
结合 Vue 的响应式数据和事件处理实现交互：
<template>
<div class="interactive-ruler" @mousedown="startDrag">
<div class="ruler-track" ref="track">
<!-- 刻度线同上 -->
</div>
<div
class="ruler-handle"
:style="{ left: handlePosition + 'px' }"
@mousedown="startHandleDrag"
></div>
</div>
</template>
<script>
export default {
data() {
return {
handlePosition: 0,
isDragging: false
};
},
methods: {
startHandleDrag(e) {
this.isDragging = true;
document.addEventListener('mousemove', this.handleDrag);
document.addEventListener('mouseup', this.stopDrag);
},
handleDrag(e) {
if (!this.isDragging) return;
const trackRect = this.$refs.track.getBoundingClientRect();
this.handlePosition = Math.min(
Math.max(0, e.clientX - trackRect.left),
trackRect.width
);
this.$emit('input', this.handlePosition);
},
stopDrag() {
this.isDragging = false;
document.removeEventListener('mousemove', this.handleDrag);
document.removeEventListener('mouseup', this.stopDrag);
}
}
};
</script>第三方库推荐
对于复杂需求，可以考虑以下专门用于标尺的 Vue 组件库：
- vue-ruler-tool: 提供测量和标尺功能，支持自定义样式
- vue-drag-resize: 实现可拖拽和缩放的标尺组件
- leader-line-vue: 带连接线的标尺实现
安装示例：
npm install vue-ruler-tool使用示例：
<template>
<vue-ruler-tool
:content-width="2000"
:content-height="1000"
:scale="1"
@handleDrag="handleRulerDrag"
/>
</template>以上方法可根据实际需求选择或组合使用，CSS 方案适合简单静态标尺，SVG 适合定制化样式，而交互式方案则适合需要用户操作的场景。
