大家好,又见面了,我是你们的朋友全栈君。
之前别人都是用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代码
box,
direction){
= (direction
==
‘top’)
?
‘offsetTop’
:
‘offsetLeft’ ;
= box[setDirection];
=
box.
offsetParent;
+=parentBox[setDirection];
=
parentBox.
offsetParent;
=
null;
parseInt(offset);
code,
_this){
= {codeVluae : code};
=
document.
querySelector(
“#code-box”),
=
box.
querySelector(
“p”),
=
box.
querySelector(
‘.code-input’),
=
box.
querySelector(
“span”);
= [
‘mousedown’,
‘mousemove’,
‘mouseup’];
typeof
document.
ontouchstart
==
‘object’){
= [
‘touchstart’,
‘touchmove’,
‘touchend’];
moveFn(
e){
preventDefault();
= (boxEven[
‘0’]
==
‘touchstart’)
?
e.
touches[
0]
: e
||
window.
event;
=
e.
clientX
– goX;
= (endX
>
0)
? (endX
> evenWidth)
? evenWidth
: endX
:
0;
> evenWidth
*
0.7){
innerText
=
‘松开验证’;
style.
backgroundColor
=
“#66CC66”;
else{
innerText
=
”;
style.
backgroundColor
=
“#FFFF99”;
style.
width
= endX
+deviation
+
‘px’;
style.
left
= endX
+
‘px’;
removeFn() {
removeEventListener(boxEven[
‘2’],removeFn,
false);
removeEventListener(boxEven[
‘1’],moveFn,
false);
> evenWidth
*
0.7){
innerText
=
‘验证成功’;
style.
width
= evenWidth
+deviation
+
‘px’;
style.
left
= evenWidth
+
‘px’
value
=
fn.
codeVluae;
onmousedown
=
null;
ruleForm.
verification
=
true;
else{
style.
width
=
‘0px’;
style.
left
=
‘0px’;
getOffset(
box,
direction){
= (direction
==
‘top’)
?
‘offsetTop’
:
‘offsetLeft’ ;
= box[setDirection];
=
box.
offsetParent;
+=parentBox[setDirection];
=
parentBox.
offsetParent;
=
null;
parseInt(offset);
addEventListener(boxEven[
‘0’],
function(
e) {
= (boxEven[
‘0’]
==
‘touchstart’)
?
e.
touches[
0]
: e
||
window.
event;
=
e.
clientX,
=
getOffset(box,
‘left’),
=
this.
clientWidth,
=
box.
clientWidth
– deviation,
addEventListener(boxEven[
‘1’],moveFn,
false);
addEventListener(boxEven[
‘2’],removeFn,
false);
false);
setCode
=
function(
code){
codeVluae
= code;
getCode
=
function(){
fn.
codeVluae;
resetCode
=
function(){
removeAttribute(
‘style’);
removeAttribute(
‘style’);
value
=
”;
调用
=
this;
=
“jsaidaisd656”,
=
new
_this.
moveCode(code,_this);
验证样式
border:
1
px
solid
#dadada;
5
px;
input,
padding:
0
3
px;
298
px;
40
px;
#fff;
1
px
1
px
1
px
black;
#efefef;
0;
5
px;
outline:
none;
position:
relative;
p,
span{
display:
block;
position:
absolute;
left:
0;
height:
40
px;
text-align:
center;
line-height:
40
px;
border-radius:
5
px;
0;
0;
span{
width:
40
px;
background-color:
#fff;
font-size:
16
px;
cursor:
pointer;
1
px;
p{
width:
0;
background-color:
#FFFF99;
overflow:
hidden;
text-indent:
-20
px;
transition:
background
1
s
ease-in;
.code-input{
display:
none;
.code-input{
display:
none;
border:
1
px
solid
#dadada;
5
px;
input,
padding:
0
3
px;
298
px;
40
px;
#fff;
1
px
1
px
1
px
black;
#efefef;
0;
5
px;
outline:
none;
position:
relative;
p,
span{
display:
block;
position:
absolute;
left:
0;
height:
40
px;
text-align:
center;
line-height:
40
px;
border-radius:
5
px;
0;
0;
span{
width:
40
px;
background-color:
#fff;
font-size:
16
px;
cursor:
pointer;
1
px;
p{
width:
0;
background-color:
#FFFF99;
overflow:
hidden;
text-indent:
-20
px;
transition:
background
1
s
ease-in;
.code-input{
display:
none;
.code-input{
display:
none;
展示
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129433.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...