vue 登录滑动验证实现代码
发布时间：2020-12-17 02:13:18 所属栏目：百科 来源：网络整理
导读：在没给大家讲解实现代码之前，先给大家分享效果图： 之前别人都是用jq写的，自己整理了一下开始使用 >>> vue代码 0) ? (endX > evenWidth) ? evenWidth : endX : 0;if(endX > evenWidth * 0.7){progress.innerText = '松开验证';progress.style.backgroundCo
|
在没给大家讲解实现代码之前，先给大家分享效果图： 之前别人都是用jq写的，自己整理了一下开始使用 >>>vue代码 0) ? (endX > evenWidth) ? evenWidth : endX : 0;
if(endX > evenWidth * 0.7){
progress.innerText = '松开验证';
progress.style.backgroundColor = "#66CC66";
}else{
progress.innerText = '';
progress.style.backgroundColor = "#FFFF99";
}
progress.style.width = endX+deviation+'px';
evenBox.style.left = endX+'px';
}
function removeFn() {
document.removeEventListener(boxEven['2'],removeFn,false);
document.removeEventListener(boxEven['1'],moveFn,false);
if(endX > evenWidth * 0.7){
progress.innerText = '验证成功';
progress.style.width = evenWidth+deviation+'px';
evenBox.style.left = evenWidth+'px'
codeInput.value = fn.codeVluae;
evenBox.onmousedown = null;
_this.ruleForm.verification = true;
}else{
progress.style.width = '0px';
evenBox.style.left = '0px';
}
};
function getOffset(box,direction){
var setDirection = (direction == 'top') ? 'offsetTop' : 'offsetLeft' ;
var offset = box[setDirection];
var parentBox = box.offsetParent;
while(parentBox){
offset+=parentBox[setDirection];
parentBox = parentBox.offsetParent;
}
parentBox = null;
return parseInt(offset);
};
evenBox.addEventListener(boxEven['0'],function(e) {
e = (boxEven['0'] == 'touchstart') ? e.touches[0] : e || window.event;
goX = e.clientX,offsetLeft = getOffset(box,'left'),deviation = this.clientWidth,evenWidth = box.clientWidth - deviation,endX;
document.addEventListener(boxEven['1'],false);
document.addEventListener(boxEven['2'],false);
},false);
fn.setCode = function(code){
if(code)
fn.codeVluae = code;
}
fn.getCode = function(){
return fn.codeVluae;
}
fn.resetCode = function(){
evenBox.removeAttribute('style');
progress.removeAttribute('style');
codeInput.value = '';
};
return fn;
}
调用 验证样式 总结以上所述是小编给大家介绍的vue 登录滑动验证实现代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |