这篇文章主要为大家详细介绍了vue实现登录时滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现登录时滑块验证的具体代码，供大家参考，具体内容如下
1.效果图
2. 新建 SliderCheck.vue组件
<template>
<!-- 拖动验证-->
<div class="slider-check-box">
<div class="slider-check" :class="rangeStatus ? 'success' : ''">
<i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
{{ rangeStatus ? successText : startText }}
</div>
</div>
</template>
<script>
export default {
props: {
// 成功之后的函数
successFun: {
type: Function
},
//成功图标
successIcon: {
type: String,
default: 'el-icon-success'
},
//成功文字
successText: {
type: String,
default: '验证成功'
},
//开始的图标
startIcon: {
type: String,
default: 'el-icon-d-arrow-right'
},
//开始的文字
startText: {
type: String,
default: '请拖住滑块，拖动到最右边'
},
//失败之后的函数
errorFun: {
type: Function
},
//或者用值来进行监听
status: {
type: String
}
},
data() {
return {
disX: 0,
rangeStatus: false
}
},
methods: {
//滑块移动
rangeMove(e) {
let ele = e.target
let startX = e.clientX
let eleWidth = ele.offsetWidth
let parentWidth = ele.parentElement.offsetWidth
let MaxX = parentWidth - eleWidth
if (this.rangeStatus) {
//不运行
return false
}
document.onmousemove = e => {
let endX = e.clientX
this.disX = endX - startX
if (this.disX <= 0) {
this.disX = 0
}
if (this.disX >= MaxX - eleWidth) {
//减去滑块的宽度,体验效果更好
this.disX = MaxX
}
ele.style.transition = '.1s all'
ele.style.transform = 'translateX(' + this.disX + 'px)'
e.preventDefault()
}
document.onmouseup = () => {
if (this.disX !== MaxX) {
ele.style.transition = '.5s all'
ele.style.transform = 'translateX(0)'
//执行成功的函数
this.errorFun && this.errorFun()
} else {
this.rangeStatus = true
if (this.status) {
this.$parent[this.status] = true
}
//执行成功的函数
this.successFun && this.successFun()
}
document.onmousemove = null
document.onmouseup = null
}
}
}
}
</script>
<style lang="scss" scoped>
$blue: #198eeb;
@mixin jc-flex {
display: flex;
justify-content: center;
align-items: center;
}
.slider-check-box {
.slider-check {
background-color: #e9e9e9;
position: relative;
transition: 1s all;
user-select: none;
color: #585858;
@include jc-flex;
height: 40px;
&.success {
background-color: $blue;
color: #fff;
i {
color: $blue;
}
}
i {
position: absolute;
left: 0;
width: 50px;
height: 100%;
color: $blue;
background-color: #fff;
border: 1px solid #d8d8d8;
cursor: pointer;
font-size: 24px;
@include jc-flex;
}
}
}
</style>
3.在父组件index.vue注册使用
<template>
<div>
<SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>
</div>
</template>
<script>
import SliderCheck from '@/components/test/SliderCheck'
export default {
name: "index",
components:{
SliderCheck,
},
data(){
return {},
methods:{
// 滑块验证成功回调
handleSuccessFun() {
console.log('滑动成功')
},
// 滑块验证失败回调
handleErrorFun() {
console.log('滑动失败')
}
}
}
</script>
<style lang="scss" scoped>
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue+elementui实现拖住滑块拼图验证
- vue实现移动滑块验证
- Vue集成阿里云做滑块验证的实践
- Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法
- vue实现简单滑块验证
- 使用konva和vue-konva库实现拖拽滑块验证功能
- VUE接入腾讯验证码功能（滑块验证）备忘
- Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
- vue-cli 自定义指令directive 添加验证滑块示例
- vue封装图片滑块验证组件的方法
