前端滑块旋转验证登录

效果图如下

实现: 封装VerifyImg组件

<template>
  <el-dialog v-model="dialogShow" width="380px" top="24vh" class="verifyDialog">
    <div class="verify-v">
      <div
        class="check"
        @mousedown="onMouseDown"
        @mouseup="onMouseUp"
        @mousemove="onMouseMove"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
      >
        <p>拖动滑块使图片角度为正</p>
        <div class="img-con">
          <img :src="imgUrl" :style="{ transform: imgAngle }" />
          <div v-if="showError" class="check-state">验证失败</div>
          <div v-else-if="showSuccess" class="check-state">验证成功</div>
          <div v-else-if="checking" class="check-state">验证中</div>
        </div>
        <div
          ref="sliderCon"
          class="slider-con"
          :class="{ 'err-anim': showError }"
          :style="{ '--percent': percent, '--bgColor': showError ? bgError : bgColor }"
        >
          <div ref="slider" class="slider" id="slider" :class="{ sliding }" :style="{ '--move': `${slidMove}px` }">
            <el-icon size="22"><Right id="slider" /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '',
      dialogShow: false,
      showError: false,
      showSuccess: false,
      checking: false,
      sliding: false,
      slidMove: 0,
      percent: 0,
      sliderConWidth: 0,
      bgColor: 'rgba(25, 145, 250, 0.2)',
      bgError: 'rgba(255,78,78,0.2)',
      imgList: [
        new URL(`../../assets/images/verify/fn1.png`, import.meta.url).href,
        new URL(`../../assets/images/verify/fn2.png`, import.meta.url).href,
        new URL(`../../assets/images/verify/fn3.png`, import.meta.url).href
      ]
    }
  },

  computed: {
    angle() {
      let sliderConWidth = this.sliderConWidth ?? 0
      let sliderWidth = this.sliderWidth ?? 0
      let ratio = this.slidMove / (sliderConWidth - sliderWidth)
      return 360 * ratio
    },
    imgAngle() {
      return `rotate(${this.angle}deg)`
    }
  },
  mounted() {
    this.imgUrl = this.imgList[this.rand(0, 2)]
  },

  methods: {
    onTouchMove(event) {
      console.log('onTouchMove')
      if (this.sliding && this.checking === false) {
        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。
        let m = event.touches[0].clientX - this.sliderLeft
        if (m < 0) {
          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0
          // 所以直接等于 0，以防止越界
          m = 0
        } else if (m > this.sliderConWidth - this.sliderWidth) {
          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。
          // 因为css的 translateX 函数是以元素的左上角坐标计算的
          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。
          m = this.sliderConWidth - this.sliderWidth
        }
        this.slidMove = m
        console.log(this.slidMove)

        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'
      }
    },
    onTouchEnd() {
      console.log('onTouchEnd')
      if (this.sliding && this.checking === false) {
        this.checking = true
        this.validApi(this.angle)
          .then(isok => {
            if (isok) {
              this.showSuccess = true
            } else {
              this.showError = true
            }
            return new Promise((resolve, reject) => {
              // setTimeout(() => {
              if (isok) {
                resolve(Math.round(this.angle))
              } else {
                reject()
              }
              setTimeout(() => {
                this.resetSlider()
              }, 1000)
              // }, 1500)
            })
          })
          .then(angle => {
            // 处理业务，或者通知调用者验证成功
            console.log(angle)
            this.$emit('toLogin')
          })
          .catch(e => {
            console.log(e)

            // alert('旋转错误')
          })
      }
    },
    onTouchStart(event) {
      console.log('onTouchStart', event)
      // 设置状态为滑动中
      this.sliding = true
      // 下面三个变量不需要监听变化，因此不放到 data 中
      this.sliderLeft = event.touches[0].clientX // 记录鼠标按下时的x位置
      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度
      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度
      console.log(this.sliderLeft, this.sliderConWidth, this.sliderWidth)
    },
    rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1) + m - 1)
    },

    showVerify() {
      this.imgUrl = this.imgList[this.rand(0, 2)]
      this.dialogShow = true
    },
    closeVerify() {
      //1.5s后关闭弹框
      setTimeout(() => {
        this.dialogShow = false
      }, 1500)
    },
    // 重置滑块
    resetSlider() {
      this.sliding = false
      this.slidMove = 0
      this.checking = false
      this.showSuccess = false
      this.showError = false
      this.percent = 0
    },
    //拖拽开始
    onMouseDown(event) {
      console.log(event.target.id, this.checking)
      if (event.target.id !== 'slider') {
        return
      }

      if (this.checking) return
      // 设置状态为滑动中
      this.sliding = true
      // 下面三个变量不需要监听变化，因此不放到 data 中
      this.sliderLeft = event.clientX // 记录鼠标按下时的x位置
      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度
      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度
    },
    //拖拽停止
    onMouseUp(event) {
      if (this.sliding && this.checking === false) {
        this.checking = true
        this.validApi(this.angle)
          .then(isok => {
            if (isok) {
              this.showSuccess = true
            } else {
              this.showError = true
            }
            return new Promise((resolve, reject) => {
              // setTimeout(() => {
              if (isok) {
                resolve(Math.round(this.angle))
              } else {
                reject()
              }
              setTimeout(() => {
                this.resetSlider()
              }, 1000)
              // }, 1500)
            })
          })
          .then(angle => {
            // 处理业务，或者通知调用者验证成功
            console.log(angle)
            this.$emit('toLogin')
          })
          .catch(e => {
            console.log(e)

            // alert('旋转错误')
          })
      }
    },
    //拖拽进行中
    onMouseMove(event) {
      if (this.sliding && this.checking === false) {
        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。
        let m = event.clientX - this.sliderLeft
        if (m < 0) {
          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0
          // 所以直接等于 0，以防止越界
          m = 0
        } else if (m > this.sliderConWidth - this.sliderWidth) {
          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。
          // 因为css的 translateX 函数是以元素的左上角坐标计算的
          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。
          m = this.sliderConWidth - this.sliderWidth
        }
        this.slidMove = m
        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'
      }
    },
    // 验证角度是否正确
    validApi(angle) {
      return new Promise((resolve, reject) => {
        // 模拟网络请求
        setTimeout(() => {
          // 图片已旋转的角度
          const imgAngle = 90
          // 图片已旋转角度和用户旋转角度之和
          let sum = imgAngle + angle
          // 误差范围
          const errorRang = 20
          // 当用户旋转角度和已旋转角度之和为360度时，表示旋转了一整圈，也就是转正了
          // 但是不能指望用户刚好转到那么多，所以需要留有一定的误差
          let isOk = Math.abs(360 - sum) <= errorRang

          resolve(isOk)
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss">
.verifyDialog {
  .el-dialog__body {
    padding: 15px !important;
  }
}
</style>
<style lang="scss" scoped>
.verify-v {
  display: flex;
  justify-content: center;
  align-items: center;
}
.check {
  --slider-size: 40px;
  width: 300px;
  background: white;
  box-shadow: 0px 0px 12px rgb(0 0 0 / 8%);
  border-radius: 5px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .img-con {
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-top: 20px;
    img {
      width: 100%;
      height: 100%;
      user-select: none;
    }
    .check-state {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.check .slider-con {
  width: 80%;
  height: var(--slider-size);
  border-radius: 3px;
  margin-top: 1rem;
  position: relative;
  background: #f5f5f5;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
  background: linear-gradient(to right, var(--bgColor) 0%, var(--bgColor) var(--percent), #fff var(--percent), #fff 100%);
  .slider {
    &:hover {
      background: #1991fa;
      color: #fff;
    }
    background: #fff;
    width: var(--slider-size);
    height: var(--slider-size);
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: move;
    display: flex;
    justify-content: center;
    align-items: center;
    --move: 0px;
    transform: translateX(var(--move));
    .sliding {
      background: #4ed3ff;
    }
  }
}
.slider-con.err-anim {
  animation: jitter 0.5s;
  .slider {
    background: #ff4e4e;
  }
}
body {
  padding: 0;
  margin: 0;
  background: #fef5e0;
}

@keyframes jitter {
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>

使用

<VerifyImg ref="verifyRef" @to-login="handleLogin"></VerifyImg>


handleLogin(){
...
}