当前位置：首页 > VUE

vue实现滑动按钮

2026-01-18 07:56:20VUE

实现滑动按钮的方法

在Vue中实现滑动按钮可以通过多种方式完成，常见的有使用原生HTML/CSS结合Vue事件处理，或借助第三方库如vue-swipe-button。以下是两种常见实现方法：

使用原生HTML/CSS和Vue事件

通过监听触摸或鼠标事件实现滑动效果，适合自定义需求较高的场景。

<template>
  <div class="slider-container">
    <div 
      class="slider-button" 
      @mousedown="startDrag" 
      @touchstart="startDrag"
      :style="{ left: buttonPosition + 'px' }"
    ></div>
    <div class="slider-track"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonPosition: 0,
      isDragging: false,
      maxPosition: 200 // 滑动最大距离
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('touchmove', this.drag);
      document.addEventListener('mouseup', this.endDrag);
      document.addEventListener('touchend', this.endDrag);
    },
    drag(e) {
      if (!this.isDragging) return;
      const clientX = e.clientX || e.touches[0].clientX;
      const containerRect = this.$el.getBoundingClientRect();
      let newPosition = clientX - containerRect.left;

      // 限制滑动范围
      newPosition = Math.max(0, Math.min(newPosition, this.maxPosition));
      this.buttonPosition = newPosition;

      // 滑动到终点触发操作
      if (newPosition >= this.maxPosition) {
        this.$emit('slide-complete');
        this.endDrag();
      }
    },
    endDrag() {
      this.isDragging = false;
      this.buttonPosition = 0; // 复位
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('touchmove', this.drag);
    }
  }
};
</script>

<style>
.slider-container {
  position: relative;
  width: 250px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 25px;
}

.slider-track {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background: #e0e0e0;
}

.slider-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #42b983;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
</style>

使用第三方库`vue-swipe-button`

对于快速实现，可以使用现成的库，减少开发时间。

安装库：

npm install vue-swipe-button

示例代码：

<template>
  <SwipeButton 
    @success="onSuccess" 
    text="Slide to submit" 
    successText="Done!"
  />
</template>

<script>
import SwipeButton from 'vue-swipe-button';

export default {
  components: { SwipeButton },
  methods: {
    onSuccess() {
      console.log('Slide action completed');
    }
  }
};
</script>