vue 登录滑动验证

之前别人都是用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: 1 px solid #dadada;
border-radius: 5 px;
}
.form-inline-input input,
.code-box{
   padding: 0 3 px;
width: 298 px;
height: 40 px;
color: #fff;
text-shadow: 1 px 1 px 1 px black;
background: #efefef;
border: 0;
border-radius: 5 px;
   outline: none;
}
.code-box{
   position: relative;
}
.code-box p,
.code-box span{
   display: block;
   position: absolute;
   left: 0;
   height: 40 px;
   text-align: center;
   line-height: 40 px;
   border-radius: 5 px;
padding: 0;
margin: 0;
}
.code-box span{
   width: 40 px;
   background-color: #fff;
   font-size: 16 px;
   cursor: pointer;
margin-right: 1 px;
}
.code-box p{
   width: 0;
   background-color: #FFFF99;
   overflow: hidden;
   text-indent: -20 px;
   transition: background 1 s ease-in;
}
.code-box .code-input{
   display: none;
}
.code-box .code-input{
   display: none;
}

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

展示


你可能感兴趣的:(vue小插件)