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' } } } |
以上便是完整滑动验证码代码