vue 滑块验证,vuejs行为验证
这篇文章主要为大家详细介绍了某视频剪辑软件实现滑动验证条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现滑动验证条的具体代码，供大家参考，具体内容如下
效果
代码
VerifySlider.vue
模板
差异
ref=dragDiv
class=拖动
div ref= drag _ BG class= drag _ BG /
div ref= drag _ text class= drag _ text {确认单词} }/div
div class=滑动检查提示请滑动验证/div
差异
ref=moveDiv
:class= { handler _ ok _ BG :确认成功}
class=handler handler_bg
style= position:absolute；top:0px；left:0px；
@mousedown=mousedownFn($event)
/
/div
/模板
脚本
导出默认值{
data() {
返回{
beginClientX: 0，/*距离屏幕左端距离*/
鼠标按压：假，/*是否正则按压滑动条*/
最大宽度： ,/*拖动最大宽度，依据滑块宽度算出来的*/
确认词： 按住滑块，拖动到最右边, /* 滑块文字*/
confirmSuccess: false /*验证成功判断*/
};
},
已安装(){
文档。getelementsbytagname( html )[0].addEventListener(mousemove ，this。mousemovefn)；
文档。getelementsbytagname( html )[0].addEventListener(mouseup ，this。moseupfn)；
},
方法：{
mousedownFn:函数(e) {
控制台。log( mousedownFn )；
这个。init maxwidth()；
如果(!this.confirmSuccess) {
e。防止违约e .防止违约()；//阻止文字选中等浏览器默认事件
this.mousePressing=true
这个。begin clientx=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 ，()={ })；
}
这个参考文献。拖动_文本。风格。color= # fff
这个参考文献。移动分区。风格。左=这个。maxwidth“px”；
这个参考文献。拖_ BG。风格。宽度=这个。maxwidth“px”；
}, //验证成功函数
鼠标移动Fn(e) {
如果(this.mousePressing) {
控制台。log( mouseMoveFn )；
常数宽度=e . clientx-this。开始clientx
if (width 0 width=this.maxwidth) {
这个参考文献。移动分区。风格。left=宽度 px ；
这个参考文献。拖_ BG。风格。宽度=宽度 px ；
} else if (width this.maxwidth) {
这个。成功函数()；
}
}
}，//mousemove事件
moseUpFn(e) {
控制台。log( moseUpFn )；
this.mousePressing=false
var width=e . clientx-this。开始clientx
if (width this.maxwidth) {
//文档。getelementsbyclassname( handler )[0]。风格。左=0 像素
//文档。getelementsbyclassname( drag _ BG )[0]。风格。宽度=0 像素
这个参考文献。移动分区。风格。left=0 px
这个参考文献。拖_ BG。风格。width=0 px
}
}，//mouseup事件，
initMaxWidth() {
this.maxwidth=this .$refs.dragDiv.clientWidth - this .$参考文献。移动分区。客户端宽度；
//this.maxwidth=338
},
//将滑动条重新至于最左侧
重置(){
这个参考文献。移动分区。风格。left=0 px
这个参考文献。拖_ BG。风格。width=0 px
这个参考文献。拖动_文本。风格。color= # 333
this.confirmSuccess=false
this.mousePressing=false
this.maxwidth=this .$refs.dragDiv.clientWidth - this .$参考文献。移动分区。客户端宽度；
文档。getelementsbytagname( html )[0].addEventListener(mousemove ，this。mousemovefn)；
文档。getelementsbytagname( html )[0].addEventListener(mouseup ，this。moseupfn)；
}
}
};
/脚本
样式范围。滑动检查提示{
位置：绝对；
显示：内嵌-块；
top:0px；
右：-85px；
/*边框：1px纯红；*/
颜色：# 999;
字体大小：较小；
}。拖动{
位置：相对；
背景色：#和8及8和8;
宽度：70%;
高度：34像素
线路高度：34像素
文字对齐：中心；
}。处理程序[
宽度：40px
高度：32像素
边界：1px固体#ccc
光标：移动；
}。handler _ BG
背景：#fff
URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
不重复中心；
}。处理程序_正常_背景
背景：#fff
URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
不重复中心；
}。drag _ BG
背景色：# 7ac 23c
高度：34像素
宽度：0像素
}。拖动_文本
位置：绝对；
顶部：0像素
宽度：100%;
颜色：# 333;
文字对齐：中心；
蚊子用户选择：无：
-网络工具包用户选择：无；
用户选择：无：
表示“具有…性质的”用户选择：无：
-ms-用户-选择：无：
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。