1.vue模块采用el-dialog样式做修改
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!-- 滑动验证码模块 -->
<
el-dialog
:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">
<
div
slot="title">
<
span
class="dialog-title">请滑动验证码进行验证</
span
>
<
span
style="float:right;margin-top: -3px;">
<
el-button
icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />
<
el-button
icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />
</
span
>
</
div
>
<
div
style="position:relative;top:0;">
<
img
ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">
<
img
ref="sliderImg"
:src="imgCode.smallImg"
alt=""
class="smallImg"
:style="{ top: imgCode.positionY+'px' }"
@mousedown="(e)=>moveBtn(e,2)"
>
</
div
>
<
div
slot="footer" class="dialog-footer">
<
div
class="slider-box">
<
span
class="slider-text">向右滑动滑块填充拼图</
span
>
<
button
ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>></
button
>
</
div
>
</
div
>
</
el-dialog
>
|
2.样式部分scss代码
1.弹窗自定义部分以及图片样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.el-dialog__body {
padding
:
10px
5px
!important
;
.bigImg{
width
:
439px
;
height
:
280px
;
border-radius:
5px
;
}
.smallImg{
width
:
60px
;
height
:
60px
;
position
:
absolute
;
//
top
:
38%
;
left
:
1%
;
border-radius:
2px
;
// box-shadow:
5px
5px
10px
#696969
;
//
border
:
1px
solid
#ccc
;
cursor
:
pointer
;
}
}
.el-button--
small
.is-
circle
{
padding
:
5px
;
}
.dialog-title {
font-size
:
15px
;
color
:
#2b3f57
;
text-align
:
left
;
font-weight
:
600
;
}
.el-dialog__footer {
padding
:
0px
12px
14px
0px
!important
;
}
.el-dialog__headerbtn {
top
:
15px
!important
;
}
.el-dialog__header {
padding-bottom
:
5px
;
}
|
2.滑块样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.slider-box {
background
:
#f7f9fa
;
color
: $light_gray;
border
:
1px
solid
#e4e7eb
;
position
:
relative
;
height
:
45px
;
width
:
100%
;
margin
:
0
0
0
6px
;
border-radius:
5px
;
&:hover {
box-shadow:
0
0
2px
$btnHover;
}
.slider-text {
font-size
:
14px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
}
.slider-
icon
{
position
:
relative
;
top
:
0
;
left
:
0
;
width
:
54px
;
height
:
44px
;
line-height
:
25px
;
background
: $btn;
text-align
:
center
;
font-size
:
17px
;
color
:
#fff
;
cursor
:
pointer
;
outline
:
none
;
border
:
1px
solid
$btn;
float
:
left
;
border-radius:
5px
;
}
}
|
3.vue-js滑动相关代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
// 滑动滑块
moveBtn(e, key) {
const ele = e.target
// 获取事件触发元素
const startX = e.clientX
// 鼠标相对于浏览器窗口可视区域的X坐标（窗口坐标），可视区域不包括工具栏和滚动条。
const eleWidth = ele.offsetWidth
// 元素的布局宽度
const parentWidth =
this
.$refs.bgImg.offsetWidth
// 父元素的布局宽度 ---可用大图片的宽度
const MaxX = parentWidth - eleWidth
// 可滑动的最大距离
if
(key === 1) {
this
.$refs.sliderImg.style.transition =
''
// 初始清空小图片动画
}
else
{
this
.$refs.btnImg.style.transition =
''
// 初始清空小图片动画
}
ele.style.transition =
''
// 初始清空滑块动画
document.onmousemove = (e) => {
// 鼠标开始滑动事件
const endX = e.clientX
// 滑动过程中鼠标相对于窗口的坐标
this
.disX = endX - startX
// 鼠标的滑动距离
if
(key === 1) {
this
.$refs.sliderImg.style.left =
this
.disX +
'px'
// 小图片的滑动距离
}
else
{
this
.$refs.btnImg.style.left =
this
.disX +
'px'
}
if
(
this
.disX <= 0) {
// 滑动距离小于0，重置位置
this
.disX = 0
if
(key === 1) {
this
.$refs.sliderImg.style.left = 0
}
else
{
this
.$refs.btnImg.style.left = 0
}
}
if
(
this
.disX >= MaxX) {
// 减去滑块的宽度,体验效果更好---》最大滑动距离减去滑块宽度便是真正的滑动距离
this
.disX = MaxX
if
(key === 1) {
this
.$refs.sliderImg.style.left = (parentWidth -
this
.$refs.sliderImg.width) +
'px'
}
else
{
this
.$refs.btnImg.style.left = (parentWidth -
this
.$refs.sliderImg.width) +
'px'
}
}
ele.style.transform =
'translateX('
+
this
.disX +
'px)'
// 加横向动画
e.preventDefault()
// 取消默认事件
}
document.onmouseup = () => {
if
(
this
.loginTypeFlag ===
'login'
) {
this
.loginInterface()
// 登陆调用
}
else
{
this
.getSendCode()
// 获取验证码
}
ele.style.transition =
'.4s ease'
// 初始化滑块位置
ele.style.transform =
'translateX(0)'
// 清除滑动事件
document.onmousemove =
null
document.onmouseup =
null
if
(key === 1) {
// 鼠标松开复原小图片
this
.$refs.sliderImg.style.left =
'1%'
this
.$refs.sliderImg.style.top =
this
.imgCode.positionY
this
.$refs.sliderImg.style.transition =
'0.4s ease'
}
else
{
this
.$refs.btnImg.style.left =
'0'
this
.$refs.btnImg.style.transition =
'0.4s ease'
}
}
}
|
以上便是完整滑动验证码代码