Vue+Element-Ui手寫登錄滑動驗證碼

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

　　以上便是完整滑動驗證碼代碼