vue3實現(xiàn)旋轉圖片驗證

更新時間：2022年04月23日 09:54:31 作者：放風嘍

這篇文章主要為大家詳細介紹了vue3實現(xiàn)旋轉圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue3實現(xiàn)旋轉圖片驗證的具體代碼，供大家參考，具體內(nèi)容如下

一、前言

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

二、代碼

<template>
? <el-dialog
? ? ? v-model="dialogVisible"
? ? ? width="15%"
? ? ? :before-close="handleClose">
? ? <el-image :src="imageUrl" :style="xuanzhuan" 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" :style="leftnum" 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("http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.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("成功的回調")
?? ?}
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: