vue实现页面刻度

实现页面刻度的基本思路

在Vue中实现页面刻度通常用于展示进度、测量或标记特定位置。可以通过动态计算和渲染刻度元素来实现，结合CSS样式控制显示效果。

使用动态渲染刻度线

通过v-for指令动态生成刻度线，结合计算属性确定刻度数量和位置。例如水平刻度尺的实现方式：

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

<script>
export default {
  data() {
    return {
      totalLength: 500, // 刻度总长度
      interval: 50      // 刻度间隔
    }
  },
  computed: {
    ticks() {
      const ticks = []
      for (let i = 0; i <= this.totalLength; i += this.interval) {
        ticks.push({
          position: i,
          label: i
        })
      }
      return ticks
    }
  }
}
</script>

<style>
.ruler-container {
  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: 100%;
  transform: translateX(-50%);
  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">{{ 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;
  left: 100%;
  transform: translateY(-50%);
  font-size: 12px;
}
</style>

实现可交互刻度尺

添加拖拽功能可以让用户自定义测量范围：

<template>
  <div class="interactive-ruler">
    <div class="ruler-track" ref="track">
      <div 
        class="start-marker"
        @mousedown="startDrag('start')"
        :style="{ left: `${startPosition}px` }"
      ></div>
      <div 
        class="end-marker"
        @mousedown="startDrag('end')"
        :style="{ left: `${endPosition}px` }"
      ></div>
      <div class="measure" :style="measureStyle"></div>
    </div>
    <div class="measure-value">
      测量值: {{ measureValue }}px
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startPosition: 50,
      endPosition: 300,
      isDragging: false,
      currentDrag: null
    }
  },
  computed: {
    measureValue() {
      return Math.abs(this.endPosition - this.startPosition)
    },
    measureStyle() {
      const left = Math.min(this.startPosition, this.endPosition)
      const width = this.measureValue
      return {
        left: `${left}px`,
        width: `${width}px`
      }
    }
  },
  methods: {
    startDrag(type) {
      this.currentDrag = type
      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()
      const position = e.clientX - trackRect.left
      const boundedPosition = Math.max(0, Math.min(position, trackRect.width))

      if (this.currentDrag === 'start') {
        this.startPosition = boundedPosition
      } else {
        this.endPosition = boundedPosition
      }
    },
    stopDrag() {
      this.isDragging = false
      this.currentDrag = null
      document.removeEventListener('mousemove', this.handleDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

<style>
.interactive-ruler {
  margin-top: 50px;
}

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

.start-marker, .end-marker {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 20px;
  background-color: #42b983;
  cursor: ew-resize;
}

.measure {
  position: absolute;
  bottom: 0;
  height: 10px;
  background-color: rgba(66, 185, 131, 0.3);
}

.measure-value {
  margin-top: 10px;
  text-align: center;
}
</style>

响应式刻度尺

结合窗口大小变化调整刻度尺：

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      if (this.$refs.rulerContainer) {
        this.totalLength = this.$refs.rulerContainer.clientWidth
      }
    }
  }
}

这些方法展示了Vue中实现页面刻度的不同方式，可以根据具体需求选择或组合使用。动态渲染和响应式设计可以确保刻度尺在不同场景下都能正常工作。