vue实现滑块

Vue 实现滑块的基本方法

使用 Vue 实现滑块功能可以通过原生 HTML 结合 Vue 的响应式特性，或借助第三方组件库。以下是两种常见实现方式：

原生实现（基于 input range）

<template>
  <div>
    <input 
      type="range" 
      v-model="sliderValue" 
      :min="min" 
      :max="max" 
      @input="handleInput"
    >
    <span>{{ sliderValue }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 50,
      min: 0,
      max: 100
    }
  },
  methods: {
    handleInput() {
      console.log('当前值:', this.sliderValue);
    }
  }
}
</script>

使用第三方组件库（如 Element UI）

安装 Element UI 后：

<template>
  <el-slider v-model="value" :min="0" :max="100" @change="onChange"></el-slider>
</template>

<script>
export default {
  data() {
    return {
      value: 50
    }
  },
  methods: {
    onChange(val) {
      console.log('滑块值变化:', val);
    }
  }
}
</script>

自定义滑块组件实现

如需更灵活的样式控制，可自定义组件：

<template>
  <div class="custom-slider">
    <div class="track" ref="track" @mousedown="startDrag">
      <div class="thumb" :style="{ left: thumbPosition + 'px' }"></div>
    </div>
    <span>{{ currentValue }}</span>
  </div>
</template>

<script>
export default {
  props: {
    min: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
    value: { type: Number, default: 50 }
  },
  data() {
    return {
      currentValue: this.value,
      isDragging: false,
      trackWidth: 0
    }
  },
  computed: {
    thumbPosition() {
      return (this.currentValue - this.min) / (this.max - this.min) * this.trackWidth;
    }
  },
  mounted() {
    this.trackWidth = this.$refs.track.offsetWidth;
    window.addEventListener('resize', this.updateTrackWidth);
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
      this.updateValue(e);
    },
    onDrag(e) {
      if (this.isDragging) this.updateValue(e);
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    updateValue(e) {
      const rect = this.$refs.track.getBoundingClientRect();
      let pos = e.clientX - rect.left;
      pos = Math.max(0, Math.min(pos, this.trackWidth));
      this.currentValue = Math.round(
        (pos / this.trackWidth) * (this.max - this.min) + this.min
      );
      this.$emit('input', this.currentValue);
    },
    updateTrackWidth() {
      this.trackWidth = this.$refs.track.offsetWidth;
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateTrackWidth);
  }
}
</script>

<style>
.custom-slider {
  width: 300px;
  margin: 20px;
}
.track {
  height: 4px;
  background: #ddd;
  position: relative;
  cursor: pointer;
}
.thumb {
  width: 16px;
  height: 16px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
}
</style>

关键实现要点

• 双向绑定：通过 v-model 实现数据同步，或手动处理 @input/@change 事件
• 响应式设计：监听窗口大小变化时更新轨道宽度
• 拖拽逻辑：通过鼠标事件计算滑块位置与值的映射关系
• 样式定制：完全控制滑轨和滑块的样式表现

以上方法可根据项目需求选择，轻量级需求推荐原生实现，复杂场景建议使用成熟组件库。