vue3实现移动端滑动模块

import {defineComponent, onMounted} from "vue"; export default defineComponent({   setup(prop,content) {     let controlDiv ='' //控制器容器元素     let circleDiv = '' //中心圆元素     //最大宽高     let maxW = 0     let maxH = 0     //初始触摸点     let oL = 0     let oT = 0     //相对屏幕的初始触摸点     let touchClientX = 0      let touchClientY = 0     onMounted(() => {       controlDiv = document.querySelector('#controlDiv') //控制器容器元素       circleDiv = document.querySelector('#centerCircle') //中心圆元素       console.log(circleDiv.offsetWidth, circleDiv.offsetHeight)       //限制最大宽高，不让滑块出去       maxW = controlDiv.offsetWidth       maxH = controlDiv.offsetHeight     })     //手指触摸开始，记录div的初始位置     const start = (e) => {       var ev = e || window.event;       var touch = ev.targetTouches[0];       //初始位置       oL = touch.clientX - circleDiv.offsetLeft       oT = touch.clientY - circleDiv.offsetTop       touchClientX = touch.clientX       touchClientY = touch.clientY       console.log(oL, oT)       //阻止浏览器滑动默认行为       document.addEventListener('touchmove', defaultEvent, { passive: false })     }     //手指滑动并改变滑块位置     const move = (e) => {       var ev = e || window.event       var touch = ev.targetTouches[0]       var oLeft = touch.clientX - oL       var oTop = touch.clientY - oT       //判断是否超出边界       if(oLeft - 30 <0) {           oLeft = 30       } else if(oLeft + 30 >= maxW) {           oLeft = maxW-30       }       if(oTop - 30 <0) {           oTop = 30       } else if(oTop + 30 >= maxH) {           oTop = maxH-30       }       //通过正切函数       let tan = (150 - oTop)/(oLeft - 150)       // console.log(tan)       // circleDiv.style.transition = '.1s all' //动画效果（体验不佳，不建议使用）       //判断中心位置上下左右20px范围可随意滑动       if(Math.abs(oLeft - 150) >= 20 || Math.abs(150 - oTop)>= 20){         // 通过正切函数判断滑块该在X轴上移动或是y轴上移动         if((tan <= -1) || (tan >= 1)){ //y轴           circleDiv.style.top =  oTop + 'px'           circleDiv.style.left =  150 + 'px'         }else if((tan > -1) || (tan <1)){ //x轴           circleDiv.style.top = 150 + 'px'           circleDiv.style.left = oLeft + 'px'         }       }else{         circleDiv.style.top =  oTop + 'px'         circleDiv.style.left = oLeft + 'px'       }     }     //手指抬起     const end = (e) => {       //回弹初始点       circleDiv.style.left = (touchClientX -  oL) + 'px'       circleDiv.style.top = (touchClientY - oT) + 'px'       //恢复浏览器滑动默认行为       document.removeEventListener("touchmove", defaultEvent, { passive: true })     }     //阻止默认事件     function defaultEvent(e) {       e.preventDefault();     }     return { start, move, end }   } });

.controlDiv{   position: relative;   width: 300px;   height: 300px;   background: #ebebeb;   margin: 200px auto;   border-radius: 50%;  } .centerCircle{   width: 65px;   height: 65px;   background: #fff;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   border-radius: 50%;   box-shadow:0px 0px 30px #a7a7a7; }