vue 滑动验证,vue免费滑块验证码插件
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件滑块验证的实现，代码如下
模板
div class=拖动
ref=dragDiv
div class=drag_bg/div
div class= drag _ text {确认单词} }/div
div ref=moveDiv
@mousedown=mousedownFn($event)
:class= { handler _ ok _ BG :确认成功}
class=handler handler_bg
style= position:absolute；top:0px；left:0px；/div
/div
/模板
脚本
导出默认值{
data () {
返回{
beginClientX: 0，/*距离屏幕左端距离*/
mouseMoveStata: false，/*触发拖动状态判断*/
最大宽度： ,/*拖动最大宽度，依据滑块宽度算出来的*/
确认词： 拖动滑块验证, /* 滑块文字*/
confirmSuccess: false /*验证成功判断*/
}
},
方法：{
mousedownFn:函数(e) {
如果(!this.confirmSuccess) {
防止默认e .防止默认()//阻止文字选中等浏览器默认事件
this.mouseMoveStata=true
this.beginClientX=e.clientX
}
}，//mousedoen事件
successFunction () {
this.confirmSuccess=true
this.confirmWords=验证通过
if (window.addEventListener) {
文档。getelementsbytagname( html )[0].removeEventListener(mousemove ，this.mouseMoveFn)
文档。getelementsbytagname( html )[0].removeEventListener(mouseup ，this.moseUpFn)
}否则{
文档。getelementsbytagname( html )[0].removeEventListener(mouseup ，()={ })
}
文档。getelementsbyclassname( drag _ text )[0]。风格。color= # fff
文档。getelementsbyclassname( handler )[0]。风格。左=这个。最大宽度像素
文档。getelementsbyclassname( drag _ BG )[0]。风格。宽度=这个。最大宽度像素
}, //验证成功函数
鼠标移动Fn (e) {
if (this.mouseMoveStata) {
设width=e . clientx-this。开始客户端x
if (width 0 width=this.maxwidth) {
文档。getelementsbyclassname( handler )[0]。风格。左=宽度像素
文档。getelementsbyclassname( drag _ BG )[0]。风格。宽度=宽度像素
} else if (width this.maxwidth) {
this.successFunction()
}
}
}，//mousemove事件
moseUpFn (e) {
this.mouseMoveStata=false
var width=e . clientx-this。开始客户端x
if (width this.maxwidth) {
文档。getelementsbyclassname( handler )[0]。风格。左=0 像素
文档。getelementsbyclassname( drag _ BG )[0]。风格。宽度=0 像素
}
} //鼠标抬起事件
},
已安装(){
this.maxwidth=this .$refs.dragDiv.clientWidth - this .$refs.moveDiv.clientWidth
文档。getelementsbytagname( html )[0].addEventListener(mousemove ，this.mouseMoveFn)
文档。getelementsbytagname( html )[0].addEventListener(mouseup ，this.moseUpFn)
}
}
/脚本
样式范围。拖动{
位置：相对；
背景色：# e8e8e8
宽度：30%;
高度：34px
行高：34px
文本对齐：居中；
}。处理程序{
宽度：40px
高度：32px
边框：1px纯色# ccc
光标：移动；
}。处理器_bg {
背景：#fff
URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
不重复中心；
}。处理程序_正常_背景
背景：#fff
URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
不重复中心；
}。drag _ BG
背景色：# 7ac 23c
高度：34像素
宽度：0像素
}。拖动_文本
位置：绝对；
顶部：0像素
宽度：100%;
文字对齐：中心；
蚊子用户选择：无：
-网络工具包用户选择：无；
用户选择：无：
表示“具有…性质的”用户选择：无：
-ms-用户-选择：无：
}
/风格
效果图如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。