Vue+Element-Ui手写登录滑动验证码

 

 

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'
       }
     }
   }

　　以上便是完整滑动验证码代码

posted @ 2021-04-09 17:19  威武的大萝卜  阅读(1617)  评论(0)  编辑  收藏  举报