vue 滑动验证,vue跳过登录验证
这篇文章主要为大家详细介绍了某视频剪辑软件实现登录时滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现登录时滑块验证的具体代码，供大家参考，具体内容如下
1.效果图
2.新建SliderCheck.vue组件
模板
！-拖动验证-
div class=滑块-复选框
div class= slider-check :class=范围状态？成功 :
I @ mousedown= range move :class= range status？successIcon : startIcon/i
{{ rangeStatus？成功文本：startText }}
/div
/div
/模板
脚本
导出默认值{
道具：{
//成功之后的函数
成功乐趣：{
类型：功能
},
//成功图标
成功图标：{
类型：字符串，
默认值：“El-icon-成功"
},
//成功文字
成功文本：{
类型：字符串，
默认值： 验证成功
},
//开始的图标
开始图标：{
类型：字符串，
默认：“el图标-d箭头-向右"
},
//开始的文字
startText: {
类型：字符串，
默认值： 请拖住滑块，拖动到最右边
},
//失败之后的函数
错误乐趣：{
类型：功能
},
//或者用值来进行监听
状态：{
类型：字符串
}
},
data() {
返回{
disX: 0，
rangeStatus: false
}
},
方法：{
//滑块移动
范围移动(e) {
让ele=e .目标
设startX=e.clientX
设eleWidth=ele.offsetWidth
设父宽度=ele。父元素。偏移距离
设MaxX=parentWidth - eleWidth
if (this.rangeStatus) {
//不运行
返回错误的
}
document.onmousemove=e={
设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。风格。transform= translate x( this。disx px)
预防默认()
}
document.onmouseup=()={
如果(this.disX！==MaxX) {
ele。风格。过渡=。5s全部
ele。风格。transform= translate x(0)
//执行成功的函数
this.errorFun this.errorFun()
}否则{
this.rangeStatus=true
if (this.status) {
这个. parent[this.status]=true
}
//执行成功的函数
this.successFun this.successFun()
}
document.onmousemove=null
document.onmouseup=null
}
}
}
}
/脚本
样式lang=scss 范围
$ blue:# 198 eeb；
@mixin jc-flex {
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。滑块-复选框{。滑块检查{
背景色：# e9e9e9
位置：相对；
过渡：1s全部
用户选择：无；
颜色：# 585858;
@包含JC-flex；
高度：40px。成功{
背景色：$蓝色；
颜色：# fff
我{
颜色：$蓝色；
}
}
我{
位置：绝对；
左：0;
宽度：50px
身高：100%;
颜色：$蓝色；
背景色：# fff
边框：1px纯色# d8d8d8
光标：指针；
字体大小：24px
@包含JC-flex；
}
}
}
/风格
3.在父组件索引。某视频剪辑软件注册使用
模板
差异
滑块检查：成功乐趣= handleSuccessFun :错误乐趣= handleErrorFun /滑块检查
/div
/模板
脚本
从" @/组件/测试/幻灯片检查"导入SliderCheck
导出默认值{
名称："索引",
组件：{
SliderCheck，
},
data(){
返回{},
方法：{
//滑块验证成功回调
handleSuccessFun() {
console.log(滑动成功)
},
//滑块验证失败回调
handleErrorFun() {
console.log(滑动失败)
}
}
}
/脚本
样式lang=scss 范围
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。