vue2滑块验证
纯 Vue 2 实现的滑块拖动验证组件
效果说明
拖动滑块到最右侧判定为验证成功
支持自定义宽度、高度、颜色、提示文字
可扩展轨迹分析或后端验证逻辑
Vue 2 滑块验证组件代码
SliderVerify.vue
注意：icon图标使用的是Element ui图标
<template><div class="slider-container" :style="{ width: width + 'px', height: height + 'px' }"><div class="slider-track" :style="{ backgroundColor: trackColor, width: trackWidth + 'px' }"></div><divclass="slider-button":style="{ left: buttonLeft + 'px', backgroundColor: buttonColor }"@mousedown="startDrag"><span v-if="!isPassed"> <i class="el-icon-d-arrow-right"></i></span><span v-else><i class="el-icon-check"></i></span></div><div class="slider-text">{{ isPassed ? successText : text }}</div></div>
</template><script>
export default {name: 'SliderVerify',props: {width: { type: Number, default: 300 },height: { type: Number, default: 40 },text: { type: String, default: '请将滑块拖动到右侧' },successText: { type: String, default: '验证成功' },trackColor: { type: String, default: '#4caf50' },buttonColor: { type: String, default: '#fff' }},data() {return {isDragging: false,startX: 0,buttonLeft: 0,trackWidth: 0,isPassed: false}},methods: {startDrag(e) {if (this.isPassed) returnthis.isDragging = truethis.startX = e.clientX - this.buttonLeftdocument.addEventListener('mousemove', this.onDrag)document.addEventListener('mouseup', this.endDrag)},onDrag(e) {if (!this.isDragging) returnlet moveX = e.clientX - this.startXconst maxX = this.width - this.heightmoveX = Math.max(0, Math.min(moveX, maxX))this.buttonLeft = moveXthis.trackWidth = moveX + this.height},endDrag() {this.isDragging = falsedocument.removeEventListener('mousemove', this.onDrag)document.removeEventListener('mouseup', this.endDrag)const maxX = this.width - this.heightif (this.buttonLeft >= maxX - 5) {this.isPassed = truethis.$emit('pass')} else {this.buttonLeft = 0this.trackWidth = 0}}}
}
</script><style scoped>
.slider-container {position: relative;background: #d3d3d3;border-radius: 4px;user-select: none;
}
.slider-track {position: absolute;top: 0;left: 0;height: 100%;transition: width 0.2s;border-radius: 4px;
}
.slider-button {position: absolute;top: 0;width: 40px;height: 100%;text-align: center;line-height: 40px;font-size: 18px;cursor: pointer;border-radius: 4px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);z-index: 2;
}
.slider-text {position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 40px;text-align: center;font-size: 14px;color: #666;z-index: 1;
}
</style>
使用方式
在父组件中：
<SliderVerify @pass="handleVerifySuccess" />
<script>
import SliderVerify from "@/components/Login/SliderVerify.vue";
export default {components: {SliderVerify},data() {return {};},methods: {handleVerifySuccess() {console.log('验证通过！')// 可执行登录、提交等操作}},
};
</script>
可扩展方向（以下内容仅提供思路）
✅ 加入拖动轨迹分析（防机器人）
✅ 拖动完成后调用后端接口验证
✅ 添加“重置”按钮或自动重置逻辑
✅ 支持移动端触摸事件（
touchstart,touchmove,touchend）
1. 加入拖动轨迹分析（防机器人）
目的：判断用户是否是人类，通过拖动轨迹的“自然性”来识别。
实现思路：
在
onDrag方法中记录每一次拖动的时间戳和位置：data() {return {dragTrace: [] // [{x: 123, time: 123456789}]} }, methods: {onDrag(e) {const now = Date.now()this.dragTrace.push({ x: e.clientX, time: now })// 原有拖动逻辑...} }拖动完成后分析轨迹：
endDrag() {// 轨迹分析：速度是否过快、是否有停顿、是否线性过于完美const isHumanLike = this.analyzeTrace(this.dragTrace)if (!isHumanLike) {alert('行为异常，请重试')this.resetSlider()return}// 原有验证逻辑... }, analyzeTrace(trace) {if (trace.length < 5) return falseconst speeds = []for (let i = 1; i < trace.length; i++) {const dx = Math.abs(trace[i].x - trace[i - 1].x)const dt = trace[i].time - trace[i - 1].timespeeds.push(dx / dt)}const avgSpeed = speeds.reduce((a, b) => a + b, 0) / speeds.lengthreturn avgSpeed < 2 && speeds.some(s => s < 0.5) // 有停顿、有波动 }
2. 拖动完成后调用后端接口验证
目的：让后端参与验证，提升安全性。
实现方式：
在
endDrag中加入 API 请求：async endDrag() {const maxX = this.width - this.heightif (this.buttonLeft >= maxX - 5) {try {const res = await fetch('/api/verify-slider', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ trace: this.dragTrace })})const result = await res.json()if (result.success) {this.isPassed = truethis.$emit('pass')} else {alert('验证失败，请重试')this.resetSlider()}} catch (err) {console.error('验证接口异常', err)this.resetSlider()}} else {this.resetSlider()} }
3. 添加“重置”按钮或自动重置逻辑
目的：用户拖错了可以重新尝试。
实现方式：
添加按钮：
<button v-if="!isPassed" @click="resetSlider" class="reset-btn">重置</button>方法定义：
methods: {resetSlider() {this.buttonLeft = 0this.trackWidth = 0this.dragTrace = []this.isPassed = false} }自动重置（比如 3 秒后）：
if (!this.isPassed) {setTimeout(() => this.resetSlider(), 3000) }
4. 支持移动端触摸事件（touchstart, touchmove, touchend）
目的：让组件在手机上也能正常使用。
实现方式：
添加事件监听：
<divclass="slider-button"@mousedown="startDrag"@touchstart="startTouch"@touchmove="onTouchMove"@touchend="endTouch" >方法定义：
methods: {startTouch(e) {this.isDragging = truethis.startX = e.touches[0].clientX - this.buttonLeft},onTouchMove(e) {if (!this.isDragging) returnconst moveX = e.touches[0].clientX - this.startXconst maxX = this.width - this.heightthis.buttonLeft = Math.max(0, Math.min(moveX, maxX))this.trackWidth = this.buttonLeft + this.heightthis.dragTrace.push({ x: e.touches[0].clientX, time: Date.now() })},endTouch() {this.isDragging = falsethis.endDrag() // 复用原有逻辑} }