当前位置：首页 > VUE

vue实现游标尺

2026-01-19 14:42:33VUE

游标尺的实现思路

在Vue中实现游标尺可以通过自定义组件结合CSS和JavaScript来完成。游标尺通常用于展示进度或选择范围，常见于音频播放器、视频编辑器等场景。

基础HTML结构

创建一个基础的游标尺组件需要定义容器和游标元素：

<template>
  <div class="ruler-container" ref="ruler" @mousedown="handleMouseDown">
    <div class="cursor" :style="{ left: cursorPosition + 'px' }"></div>
    <div class="scale-markers">
      <div v-for="(marker, index) in markers" :key="index" class="marker"></div>
    </div>
  </div>
</template>

CSS样式设置

游标尺的样式需要确保容器相对定位，游标绝对定位：

.ruler-container {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.cursor {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: red;
  top: 0;
}

.scale-markers {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.marker {
  width: 1px;
  height: 15px;
  background-color: #999;
}

Vue组件逻辑

实现游标移动的核心逻辑：

<script>
export default {
  data() {
    return {
      cursorPosition: 0,
      markers: Array(10).fill(0),
      isDragging: false
    }
  },
  methods: {
    handleMouseDown(e) {
      this.isDragging = true
      this.updateCursorPosition(e)
      document.addEventListener('mousemove', this.handleMouseMove)
      document.addEventListener('mouseup', this.handleMouseUp)
    },
    handleMouseMove(e) {
      if (this.isDragging) {
        this.updateCursorPosition(e)
      }
    },
    handleMouseUp() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleMouseMove)
      document.removeEventListener('mouseup', this.handleMouseUp)
    },
    updateCursorPosition(e) {
      const rulerRect = this.$refs.ruler.getBoundingClientRect()
      let position = e.clientX - rulerRect.left
      position = Math.max(0, Math.min(position, rulerRect.width))
      this.cursorPosition = position
    }
  }
}
</script>

进阶功能实现

要实现更复杂的游标尺，可以考虑以下增强功能：

添加刻度标签

data() {
  return {
    // ...
    scaleLabels: ['0', '25', '50', '75', '100']
  }
}

在模板中添加标签显示：

<div class="scale-labels">
  <span v-for="(label, index) in scaleLabels" :key="index">{{ label }}</span>
</div>

支持双向绑定

props: {
  value: {
    type: Number,
    default: 0
  }
},
watch: {
  cursorPosition(newVal) {
    const rulerWidth = this.$refs.ruler.offsetWidth
    const percentage = (newVal / rulerWidth) * 100
    this.$emit('input', Math.round(percentage))
  }
}

响应式设计考虑

确保游标尺在不同屏幕尺寸下正常工作：

mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    // 重新计算游标位置
  }
}

触摸屏支持

为移动设备添加触摸事件支持：

<div class="ruler-container" 
     @mousedown="handleMouseDown"
     @touchstart="handleTouchStart">
</div>

methods: {
  handleTouchStart(e) {
    this.isDragging = true
    this.updateCursorPosition(e.touches[0])
    document.addEventListener('touchmove', this.handleTouchMove)
    document.addEventListener('touchend', this.handleTouchEnd)
  },
  handleTouchMove(e) {
    if (this.isDragging) {
      this.updateCursorPosition(e.touches[0])
    }
  },
  handleTouchEnd() {
    this.isDragging = false
    document.removeEventListener('touchmove', this.handleTouchMove)
    document.removeEventListener('touchend', this.handleTouchEnd)
  }
}

通过以上方法，可以在Vue中实现一个功能完善的游标尺组件，既支持桌面端也支持移动端操作。

vue实现游标尺