How to realize rotating Picture Verification by vue3
Most people do not understand the knowledge points of this article "vue3 how to achieve rotating picture verification", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue3 how to achieve rotating picture verification" article.
I. Preface
A whimsical creation.
II. Code
Reset to determine import {computed, defineComponent, ref} from "vue" Export default defineComponent ({name: "xuanzhuan", setup (prop,content) {/ / left distance and moving distance const disX = ref (0) const leftnum = computed (() = > {return `left: ${disX.value} px`}) / / Angle and rotation 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 (" get a picture from the background ")} 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=MaxX) {/ / minus the width of the slider for better experience disX.value=MaxX } / / calculate the ratio of the sliding distance to the full length const bili = disX.value / (MaxX-eleWidth) / / multiply the ratio by 360 degrees, which is the rotation angle jiaodu.value = bili * 360} _ document.onmouseup= () = > {_ document.onmousemove = null; _ document.onmouseup= null } / / gradually decrease Function jianshao (disbuchang:number,jiaobubuchang:number) {jiaodu.value = jiaodu.value-jiaobubuchang disX.value = disX.value-disbuchang if (disX.value {if (disX.value = = 0) {clearInterval (mandian)} else {jianshao (disbuchang,jiaobubuchang)}} 10)} / / Click to confirm function tijiao () {if (disX.value = = 0) {return} console.log ("backend verification is successful") / / after success Triggers the parent component method. Content.emit ("get")} return {handleClose, imageUrl, dialogVisible, init, rangeMove, leftnum, xuanzhuan, chongzhi, tijiao,}, components: {},}
Css uses tailwindcss.
three。 Usage
Setup (prop,content) {const myxuanzhuan:any = ref (null) function ceshi () {myxuanzhuan.value.init ()} function chenggong () {console.log ("successful callback")} above is about the content of this article "how to implement rotating Image Verification by vue3". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.
