当前位置：首页 > VUE

vue实现页面刻度

2026-02-11 03:50:56VUE

Vue 实现页面刻度的方法

使用 CSS 和 Vue 动态生成刻度

通过 Vue 的 v-for 指令动态生成刻度线，结合 CSS 进行样式控制。以下是一个水平刻度尺的实现示例：

<template>
  <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.label">{{ tick.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ticks: this.generateTicks(0, 1000, 50) // 从0到1000，每50px一个刻度
    }
  },
  methods: {
    generateTicks(start, end, interval) {
      const ticks = []
      for (let i = start; i <= end; i += interval) {
        ticks.push({
          position: i,
          label: i % 100 === 0 ? i.toString() : null // 每100px显示标签
        })
      }
      return ticks
    }
  }
}
</script>

<style>
.ruler {
  position: relative;
  height: 30px;
  border-bottom: 1px solid #333;
}

.tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 10px;
  background-color: #333;
}

.tick-label {
  position: absolute;
  top: 15px;
  left: -10px;
  font-size: 12px;
}
</style>

实现垂直刻度尺

只需调整 CSS 和生成逻辑即可创建垂直刻度尺：

<template>
  <div class="vertical-ruler">
    <div 
      v-for="(tick, index) in ticks" 
      :key="index" 
      class="tick"
      :style="{ top: `${tick.position}px` }"
    >
      <span class="tick-label" v-if="tick.label">{{ tick.label }}</span>
    </div>
  </div>
</template>

<style>
.vertical-ruler {
  position: relative;
  width: 30px;
  border-right: 1px solid #333;
}

.tick {
  position: absolute;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: #333;
}

.tick-label {
  position: absolute;
  right: 15px;
  top: -6px;
  font-size: 12px;
}
</style>

可交互刻度组件

创建一个可拖动和缩放的刻度组件：

<template>
  <div class="interactive-ruler" ref="ruler">
    <div 
      v-for="(tick, index) in ticks" 
      :key="index" 
      class="tick"
      :style="{ left: `${tick.position}px` }"
    >
      <span class="tick-label" v-if="tick.label">{{ tick.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      offset: 0,
      ticks: []
    }
  },
  mounted() {
    this.updateTicks()
    this.$refs.ruler.addEventListener('wheel', this.handleWheel)
  },
  methods: {
    updateTicks() {
      const visibleWidth = this.$refs.ruler.clientWidth
      const start = Math.max(0, Math.floor(this.offset / 50) * 50)
      const end = start + visibleWidth * 1.5 / this.scale

      this.ticks = []
      for (let i = start; i <= end; i += 50) {
        this.ticks.push({
          position: (i - this.offset) * this.scale,
          label: i % 100 === 0 ? i.toString() : null
        })
      }
    },
    handleWheel(e) {
      e.preventDefault()
      if (e.ctrlKey) {
        // 缩放
        this.scale = Math.max(0.5, Math.min(2, this.scale + e.deltaY * -0.001))
      } else {
        // 平移
        this.offset = Math.max(0, this.offset + e.deltaY)
      }
      this.updateTicks()
    }
  }
}
</script>

使用 SVG 实现高精度刻度

对于需要高精度或复杂样式的刻度，可以使用 SVG：

<template>
  <svg class="svg-ruler" viewBox="0 0 1000 30">
    <g v-for="(tick, index) in ticks" :key="index">
      <line 
        :x1="tick.position" 
        y1="0" 
        :x2="tick.position" 
        y2="10" 
        stroke="#333" 
        stroke-width="1"
      />
      <text 
        v-if="tick.label" 
        :x="tick.position" 
        y="25" 
        text-anchor="middle"
        font-size="12"
      >{{ tick.label }}</text>
    </g>
  </svg>
</template>

响应式刻度尺

添加响应式功能，当窗口大小变化时自动调整刻度：

export default {
  // ...
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.updateTicks()
    }
    // ...
  }
}

这些方法可以根据具体需求进行调整和组合，实现各种类型的页面刻度效果。

vue实现页面刻度