vue3自定义指令 拖拽 与拖拽变大小

    directives:{
      drag:{
        mounted: (el, binding) => {
          const dragDom = el;
          const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
          el.parentElement.style.cursor = 'move';
          el.parentElement.onmousedown = (e) => {
              // const disX = e.clientX - el.parentElement.offsetLeft;
              // const disY = e.clientY - el.parentElement.offsetTop;
              const disX = e.clientX;
              const disY = e.clientY;
              let styL, styT;
              if(sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
              }else {
                styL = +sty.left.replace(/\px/g, '');
                styT = +sty.top.replace(/\px/g, '');
              };
              document.onmousemove = function (e) {
                  // 通过事件委托，计算移动的距离 
                  const l = e.clientX - disX;
                  const t = e.clientY - disY;
                  // 移动当前元素  
                  dragDom.style.left = `${l + styL}px`;
                  dragDom.style.top = `${t + styT}px`;
                  //将此时的位置传出去
                  //binding.value({x:e.pageX,y:e.pageY})
              };
              document.onmouseup = function (e) {
                  document.onmousemove = null;
                  document.onmouseup = null;
              };
          } 
        }
      },
      dragWidth:{
        mounted: (el, binding) => {
          const dragDom = el.parentElement;
          el.style.cursor = 'se-resize';
          let minW = binding.value.min.w;
          let minH = binding.value.min.h;
          let maxW = binding.value.max.w;
          let maxH = binding.value.max.h;
          el.onmousedown = (e) => {
              e.stopPropagation()
              e.preventDefault()
              const mask = document.createElement('div')
              mask.setAttribute('style', 'position:fixed;top:0px;bottom:0px;left:0px;right:0px;background:rgba(0,0,0,0)')
              document.body.appendChild(mask)
              // 计算当前元素距离可视区的距离
              const disX = e.clientX - el.offsetLeft;
              const disY = e.clientY - el.offsetTop;
              document.body.onmousemove = function (e) {
                e.preventDefault() // 移动时禁用默认事件
                const l = e.clientX - disX;
                const h = e.clientY - disY;
                const wh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                console.log(l,h)
                if(maxW>=l && minW<=l) dragDom.style.width = `${l}px`;
                if(maxH>=h && minH<=h) dragDom.style.height = `${h}px`;
              }
              document.body.onmouseup = function (e) {
                  document.body.removeChild(mask)
                  document.body.onmousemove = null
                  document.body.onmouseup = null
              }
          }
        }
      }
    },