vue3怎么实现旋转图片验证

这篇“vue3怎么实现旋转图片验证”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3怎么实现旋转图片验证”文章吧。

一、前言

一个突发奇想的创作。

二、代码

<template>  <el-dialog      v-model="dialogVisible"      width="15%"      :before-close="handleClose">    <el-image :src="imageUrl" : class="w-full flex justify-center rounded-full overflow-hidden">      <template #error>        <div class="image-slot">          <i class="el-icon-picture-outline text-3xl"></i>        </div>      </template>    </el-image>    <template #footer>      <div class="w-full mx-1 my-1 h-8 bg-gray-300 relative">        <i @mousedown="rangeMove" : class="el-icon-d-arrow-right h-8 w-8 bg-white border absolute top-0 bottom-0 flex justify-center items-center cursor-pointer select-none"></i>      </div>      <div class="w-full flex justify-evenly">        <el-button @click="chongzhi()">重置</el-button>        <el-button type="primary" @click="tijiao()">确定</el-button>      </div>    </template>  </el-dialog></template><script lang="ts">import {computed, defineComponent, ref} from "vue";export default defineComponent({  name:"xuanzhuan",  setup(prop,content) {    // 左侧距离和移动距离    const disX = ref(0)    const leftnum = computed(()=>{      return `left: ${disX.value}px`    })    // 角度和 旋转角度    const jiaodu = ref(0)    const xuanzhuan = computed(()=>{      return `transfORM:rotate(${jiaodu.value}deg);`    })    const dialogVisible = ref(false)    const imageUrl = ref("https://file.lsjlt.com/upload/202306/28/cwq02egeql5.jpg")    function getimage(){      console.log("向后台获取图片")    }    function init(){      dialogVisible.value = true      getimage()    }    function handleClose(){      jiaodu.value = 0      disX.value = 0      imageUrl.value = ""      dialogVisible.value = false    }    function rangeMove(e:any){      let ele = e.target;      let startX = e.clientX - disX.value;      let eleWidth = ele.offsetWidth;      let parentWidth =  ele.parentElement.offsetWidth;      let MaxX = parentWidth - eleWidth;      document.onmousemove = (e)=>{        let endX = e.clientX;        disX.value = endX - startX;        if(disX.value<=0){          disX.value = 0;        }else if(disX.value>=MaxX){   //减去滑块的宽度,体验效果更好          disX.value = MaxX;        }        // 计算滑动距离与全长的比例        const bili = disX.value / (MaxX-eleWidth)        // 用比例乘以360度，就是旋转角度        jiaodu.value = bili * 360      }      document.onmouseup=()=>{        document.onmousemove = null;        document.onmouseup = null;      }    }    // 逐步减少，看上去好看点    function jianshao(disbuchang:number,jiaobubuchang:number){      jiaodu.value = jiaodu.value - jiaobubuchang      disX.value = disX.value - disbuchang      if(disX.value <=0 ){        jiaodu.value = 0        disX.value = 0      }    }    // 点击重置，使用异步方法，逐步回到原点    function chongzhi(){      const disbuchang = 50      const jiaobubuchang = disbuchang/disX.value * jiaodu.value      const mandian = setInterval(()=>{        if(disX.value == 0){          clearInterval(mandian)        }else{          jianshao(disbuchang,jiaobubuchang)        }      },10)    }    // 点击确定    function tijiao(){      if(disX.value == 0){        return      }      console.log("后端验证成功")      // 成功后，触发父组件方法。      content.emit("get")    }    return {      handleClose,      imageUrl,      dialogVisible,      init,      rangeMove,      leftnum,      xuanzhuan,      chongzhi,      tijiao,    }  },  components:{},})</script><style scoped></style>

CSS用的是tailwindcss，

三.使用方法

<xuanzhuan ref="myxuanzhuan" @get="chengGong"></xuanzhuan>setup(prop,content) {    const myxuanzhuan:any = ref(null)    function ceshi(){      myxuanzhuan.value.init()    }    function chenggong(){        console.log("成功的回调")    }}

以上就是关于“vue3怎么实现旋转图片验证”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。