1. 全栈程序员必看首页

vue 滑动验证码(vue登陆如何获取token)

全栈程序员-站长 • • 未分类 • 阅读 130

之前别人都是用jq写的，自己整理了一下开始使用<el-form-itemlabel="验证"><divclass="form-inline-input"><divclass="code-box"id="code-box">

大家好，又见面了，我是你们的朋友全栈君。

之前别人都是用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 滑动验证码(vue登陆如何获取token)vue 滑动验证码(vue登陆如何获取token)

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/129433.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 菜鸟的算法入门：java的链表操作

    菜鸟的算法入门：java的链表操作

    菜鸟的算法入门：java的链表操作

    全栈程序员-站长的头像 全栈程序员-站长
    2021年6月11日
    95
  • acwing-395. 冗余路径(Tarjan双连通分量)

    acwing-395. 冗余路径(Tarjan双连通分量)

    acwing-395. 冗余路径(Tarjan双连通分量)为了从 F 个草场中的一个走到另一个，奶牛们有时不得不路过一些她们讨厌的可怕的树。奶牛们已经厌倦了被迫走某一条路，所以她们想建一些新路，使每一对草场之间都会至少有两条相互分离的路径，这样她们就有多一些选择。每对草场之间已经有至少一条路径。给出所有 R 条双向路的描述，每条路连接了两个不同的草场，请计算最少的新建道路的数量，路径由若干道路首尾相连而成。两条路径相互分离，是指两条路径没有一条重合的道路。但是，两条分离的路径上可以有一些相同的草场。对于同一对草场之间，可能已经有两条不同的道路，你也可以

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月9日
    4
  • ICSharpCode.SharpZipLib.dll 使用方法[通俗易懂]

    ICSharpCode.SharpZipLib.dll 使用方法[通俗易懂]

    ICSharpCode.SharpZipLib.dll 使用方法[通俗易懂]ICSharpCode.SharpZipLib.dll使用方法https://blog.csdn.net/luhn12345/article/details/48090887ICSharpCod

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月1日
    24
  • 常量字符串过长的解决办法_未受控的格式化字符串

    常量字符串过长的解决办法_未受控的格式化字符串

    常量字符串过长的解决办法_未受控的格式化字符串如果使用String str = “这是一个很长很长很长 你需要的字符串。”; 出现异常不能正常编译运行时，可以使用下方：StringBuilder sb = new StringBuilder();sb.append(“这是一个很长很长”);sb.append(“很长 你需要的字符串”);字符串太长或字符串其他情况下可使用 ： StringBuilder sb = new StringBuilder()…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月19日
    37
  • 知识点总结：Java核心技术（卷1）

    知识点总结：Java核心技术（卷1）

    知识点总结：Java核心技术（卷1）Java核心技术（卷1）一、基础概念1.1基本程序设计结构1.1数据类型1.1.1数值类型1️⃣从java7开始，加上前缀0b或0B就可以写二进制；2️⃣指数的表示十进制中以10为底指数的表示：doubled=1.0e+4;//10000.0doubled2=100000.0e-4;//10.0十六进制中以2位底指数的表示：…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月8日
    31
  • 老鹰主机怎么样？多年的用户来说下

    老鹰主机怎么样？多年的用户来说下

    老鹰主机怎么样？多年的用户来说下说到老鹰主机 我想我绝对很有发言权 因为老刘说主机这个网站就是老鹰主机搭建的 一直十分的稳定 而且国内访问速度很快 说实话之前一直非常的担心国内访问速度会很慢 但是一直以来都给我特别的惊喜和放心 下面我们一起来说说老鹰主机怎么样 1 价格便宜我自己网站用的是年付 44 刀的套餐 一个月下来平均也是就 2 刀多 提供 30 天的退款保障 这个价格在所有的国外知名的主机商里面也算是很便宜的了 2 功能强大

    全栈程序员-站长的头像 全栈程序员-站长
    2025年7月6日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号