登录滑动验证码制作

1.vue模块采用el-dialog样式做修改

  <!-- 滑动验证码模块 -->
      <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.弹窗自定义部分以及图片样式

 .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.滑块样式

.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滑动相关代码

 // 滑动滑块
    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'
        }
      }
    }

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