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'
}
}
}
|
以上便是完整滑動驗證碼代碼