当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 登录滑动验证实现代码

vue 登录滑动验证实现代码

2018年09月23日  | 移动技术网IT编程  | 我要评论

最新财经新闻,龙父虎子,mar魔法奇兵

在没给大家讲解实现代码之前，先给大家分享效果图：

之前别人都是用jq写的，自己整理了一下开始使用

<el-form-item label="验证">
<div class="form-inline-input">
<div class="code-box" id="code-box">
<input type="text" name="code" class="code-input" />
<p></p>
<span>>>></span>
</div>
</div>
</el-form-item>

vue代码

//获取元素距离页面边缘的距离
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);
},
 movecode(code,_this){
var fn = {codevluae : code};
var box = document.queryselector("#code-box"),
progress = box.queryselector("p"),
codeinput = box.queryselector('.code-input'),
evenbox = box.queryselector("span");
//默认事件
var boxeven = ['mousedown','mousemove','mouseup'];
//改变手机端与pc事件类型
if(typeof document.ontouchstart == 'object'){
boxeven = ['touchstart','touchmove','touchend'];
}
var gox,offsetleft,deviation,evenwidth,endx;
function movefn(e){
e.preventdefault();
e = (boxeven['0'] == 'touchstart') ? e.touches[0] : e || window.event;
endx = e.clientx - gox;
endx = (endx > 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'],movefn,false);
document.addeventlistener(boxeven['2'],removefn,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;
 }

调用

mounted(){
var _this = this;
// window.addeventlistener('load',function(){
//code是后台传入的验证字符串
var code = "jsaidaisd656",
codefn = new _this.movecode(code,_this);
// });
}

验证样式

.form-inline-input{
 border:1px solid #dadada;
border-radius:5px;
}
.form-inline-input input,
.code-box{
 padding: 0 3px;
width: 298px;
height: 40px;
color: #fff;
text-shadow: 1px 1px 1px black;
background: #efefef;
border: 0;
border-radius: 5px;
 outline: none;
}
.code-box{
 position: relative;
}
.code-box p,
.code-box span{
 display:block;
 position: absolute;
 left: 0;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-radius: 5px;
padding:0;
margin:0;
}
.code-box span{
 width: 40px;
 background-color:#fff;
 font-size: 16px;
 cursor: pointer;
margin-right:1px;
}
.code-box p{
 width: 0;
 background-color: #ffff99;
 overflow: hidden;
 text-indent: -20px;
 transition: background 1s ease-in;
}
.code-box .code-input{
 display: none;
}
.code-box .code-input{
 display: none;
}
.form-inline-input{
 border:1px solid #dadada;
border-radius:5px;
}
.form-inline-input input,
.code-box{
 padding: 0 3px;
width: 298px;
height: 40px;
color: #fff;
text-shadow: 1px 1px 1px black;
background: #efefef;
border: 0;
border-radius: 5px;
 outline: none;
}
.code-box{
 position: relative;
}
.code-box p,
.code-box span{
 display:block;
 position: absolute;
 left: 0;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-radius: 5px;
padding:0;
margin:0;
}
.code-box span{
 width: 40px;
 background-color:#fff;
 font-size: 16px;
 cursor: pointer;
margin-right:1px;
}
.code-box p{
 width: 0;
 background-color: #ffff99;
 overflow: hidden;
 text-indent: -20px;
 transition: background 1s ease-in;
}
.code-box .code-input{
 display: none;
}
.code-box .code-input{
 display: none;
}

总结

以上所述是小编给大家介绍的vue 登录滑动验证实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网