vue3怎么實現旋轉圖片驗證

這篇“vue3怎么實現旋轉圖片驗證”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3怎么實現旋轉圖片驗證”文章吧。

一、前言

一個突發(fā)奇想的創(chuàng)作。

二、代碼

<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://cache.yisu.com/upload/information/20220423/112/27431.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("后端驗證成功")
      // 成功后，觸發(fā)父組件方法。
      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怎么實現旋轉圖片驗證”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。