vue3 人机验证 图片角度矫正 语法糖格式传参

效果视屏 中间有alter提示没有录进去 会显着有点呆 

验证视屏

使用技术 Vue3 TS

创建组件 CorrectImage.vue 防止页面出现多处使用，使用的是语法糖格式写的

<template>
  <div class="box">
    <img ref="img" :style="{transform:`rotate(${rotationAngle+initial}deg)`}" src="../assets/images/smallBIMG.png"/>
    <div class="parent" @mousedown={handleMouseDown}>
      <div :style="{left:`${circleLeft}px`}" class="circle" @mousedown='handleMouseDown'>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'

const emit = defineEmits(["verificationResult"])

const parentWidth = 360 + 30 // 父亲的宽度
const childWidth = 30    // 小球的宽度
let circleLeft = ref(0) // 左边的距离
let rotationAngle = ref(Math.floor(Math.random() * (-330 - (-30)) + (-30)))  // 旋转角度
const initial = ref(0)  // 初始值


// 鼠标按下事件
const handleMouseDown = (e: any) => {
  e.preventDefault() // 阻止默认事件
  const startX = e.clientX
  const startLeft = circleLeft.value
  let angle = 20 // 记录计算得到的值  初始值只要不是 -10 ~ 10 之间的就行 下面判断使用 
  const handleMouseMove = (e: { clientX: number }) => {
    const offsetX = e.clientX - startX
    const newLeft = startLeft + offsetX
    if (newLeft >= 0 && newLeft <= parentWidth - childWidth) {
      initial.value = newLeft
      angle = rotationAngle.value + newLeft
      circleLeft.value = newLeft
    }
  }

  const handleMouseUp = () => {
    if (angle >= -10 && angle <= 10) {
      // 可以进行弹窗提示等操作 ······
      alert('验证正确，处理事件') 
      emit("verificationResult", true);
    } else {
      // 可以进行弹窗提示等操作 ······
      alert('验证错误，请从新验证')

      rotationAngle.value = Math.floor(Math.random() * (-330 - (-30)) + (-30))
      circleLeft.value = 0
      initial.value = 0
    }
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }

  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}
</script>
<style lang="less" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transform-origin: center center
  }

  .parent {
    border-radius: 15px;
    height: 30px;
    width: 390px;
    position: relative;
    margin-top: 20px;
    background-color: #eee;

    .circle {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      z-index: 99;
      background-color: blue;
      position: absolute;
      cursor: pointer;
    }
  }
}


</style>

父组件使用

<template>
  <div class="text-container container-item">
    <CorrectImage v-if="!verificationResult" @verificationResult="get_verification_result"/>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue'
import CorrectImage from "@/components/CorrectImage.vue";

export default defineComponent({
  name: 'HomeView',
  components: {CorrectImage},
  props: {},
  setup(props, ctx) {
    const verificationResult = ref<boolean>(false)
    const get_verification_result = (e: boolean) => {
      console.log(e)
      verificationResult.value = e
    }
    return {
      verificationResult,
      get_verification_result
    }
  }
})
</script>
<style lang="less" scoped>

</style>