当前位置：首页 > VUE

vue实现滑动验证

2026-02-20 10:44:07VUE

Vue 滑动验证实现方法

使用 vue-drag-verify 组件

vue-drag-verify 是一个轻量级的 Vue 滑动验证组件，安装简单且可定制化程度高。

安装依赖：

npm install vue-drag-verify --save

基本用法：

<template>
  <drag-verify
    :width="300"
    :height="40"
    text="请按住滑块拖动"
    successText="验证通过"
    @success="handleSuccess"
  />
</template>

<script>
import DragVerify from 'vue-drag-verify'

export default {
  components: { DragVerify },
  methods: {
    handleSuccess() {
      console.log('验证通过')
    }
  }
}
</script>

自定义实现滑动验证

如果需要完全自定义，可以手动实现滑动验证逻辑。

模板部分：

<template>
  <div class="slider-container">
    <div class="slider-track">
      <div 
        class="slider-button"
        @mousedown="startDrag"
        @touchstart="startDrag"
      ></div>
    </div>
    <div class="slider-text">{{ dragText }}</div>
  </div>
</template>

脚本部分：

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      currentX: 0,
      maxWidth: 300,
      dragText: '请滑动验证'
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('touchmove', this.onDrag)
      document.addEventListener('mouseup', this.endDrag)
      document.addEventListener('touchend', this.endDrag)
    },
    onDrag(e) {
      if (!this.isDragging) return
      const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      this.currentX = Math.min(
        this.maxWidth,
        Math.max(0, clientX - this.startX)
      )

      if (this.currentX >= this.maxWidth - 10) {
        this.dragText = '验证通过'
        this.endDrag()
        this.$emit('success')
      }
    },
    endDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('touchmove', this.onDrag)
      document.removeEventListener('mouseup', this.endDrag)
      document.removeEventListener('touchend', this.endDrag)

      if (this.currentX < this.maxWidth - 10) {
        this.currentX = 0
        this.dragText = '请滑动验证'
      }
    }
  }
}
</script>

样式部分：

<style scoped>
.slider-container {
  width: 300px;
  margin: 20px auto;
}

.slider-track {
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  border-radius: 20px;
  position: relative;
}

.slider-button {
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.slider-text {
  text-align: center;
  margin-top: 10px;
  color: #666;
}
</style>

使用 vue-monoplasty-slide-verify

另一个流行的选择是 vue-monoplasty-slide-verify 组件。

安装：

npm install vue-monoplasty-slide-verify --save

使用示例：

vue实现滑动验证

<template>
  <slide-verify
    :l="42"
    :r="10"
    :w="310"
    :h="155"
    slider-text="向右滑动"
    @success="onSuccess"
    @fail="onFail"
  ></slide-verify>
</template>

<script>
import SlideVerify from 'vue-monoplasty-slide-verify'

export default {
  components: { SlideVerify },
  methods: {
    onSuccess() {
      console.log('验证成功')
    },
    onFail() {
      console.log('验证失败')
    }
  }
}
</script>