当前位置：首页 > VUE

vue实现拖动刻度

2026-01-17 05:00:26VUE

实现拖动刻度功能

在Vue中实现拖动刻度功能可以通过结合原生HTML5的拖拽API和Vue的数据绑定特性来完成。以下是一个完整的实现方案：

基本实现思路

创建一个可拖动的滑块元素
监听鼠标事件处理拖动逻辑
计算滑块位置与刻度值的对应关系
实时更新绑定的数据值

完整组件代码示例

<template>
  <div class="slider-container">
    <div class="slider-track" ref="track" @click="handleTrackClick">
      <div 
        class="slider-thumb" 
        ref="thumb"
        @mousedown="startDrag"
      ></div>
    </div>
    <div class="slider-ticks">
      <span 
        v-for="(tick, index) in ticks" 
        :key="index"
        :class="{ active: currentValue >= tick.value }"
        @click="setValue(tick.value)"
      >
        {{ tick.label }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    min: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
    step: { type: Number, default: 10 },
    value: { type: Number, default: 0 }
  },
  data() {
    return {
      currentValue: this.value,
      isDragging: false
    }
  },
  computed: {
    ticks() {
      const ticks = []
      for (let i = this.min; i <= this.max; i += this.step) {
        ticks.push({
          value: i,
          label: i
        })
      }
      return ticks
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      document.addEventListener('mousemove', this.handleDrag)
      document.addEventListener('mouseup', this.stopDrag)
      e.preventDefault()
    },
    handleDrag(e) {
      if (!this.isDragging) return
      const trackRect = this.$refs.track.getBoundingClientRect()
      let position = (e.clientX - trackRect.left) / trackRect.width
      position = Math.max(0, Math.min(1, position))

      const range = this.max - this.min
      this.currentValue = Math.round((position * range + this.min) / this.step) * this.step
      this.$emit('input', this.currentValue)
      this.updateThumbPosition()
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    },
    handleTrackClick(e) {
      const trackRect = this.$refs.track.getBoundingClientRect()
      const position = (e.clientX - trackRect.left) / trackRect.width
      const range = this.max - this.min
      this.currentValue = Math.round((position * range + this.min) / this.step) * this.step
      this.$emit('input', this.currentValue)
      this.updateThumbPosition()
    },
    setValue(value) {
      this.currentValue = value
      this.$emit('input', value)
      this.updateThumbPosition()
    },
    updateThumbPosition() {
      const range = this.max - this.min
      const percentage = ((this.currentValue - this.min) / range) * 100
      this.$refs.thumb.style.left = `${percentage}%`
    }
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal
      this.updateThumbPosition()
    }
  },
  mounted() {
    this.updateThumbPosition()
  }
}
</script>

<style>
.slider-container {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
}

.slider-track {
  position: relative;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  cursor: pointer;
}

.slider-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #42b983;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.slider-ticks span {
  padding: 5px;
  cursor: pointer;
  user-select: none;
}

.slider-ticks span.active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用方法

<template>
  <div>
    <h3>当前值: {{ sliderValue }}</h3>
    <slider 
      v-model="sliderValue"
      :min="0"
      :max="100"
      :step="10"
    />
  </div>
</template>

<script>
import Slider from './Slider.vue'

export default {
  components: {
    Slider
  },
  data() {
    return {
      sliderValue: 30
    }
  }
}
</script>