vue点击标题栏实现拖拽

    moveFun() {
      const mainBoxs = document.querySelector(".mainBoxs");
      const dialogHeaderEl = this.$refs.titbox;
      const dragDom = this.$refs.darbox;
      //mainBoxs=最外层盒子，用来计算移动盒子的位置 dialogHeaderEl=移动的头部 dragDom=移动的盒子

      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty =
        dragDom.currentStyle || window.getComputedStyle(dragDom, null);
      dragDom.style.position = "absolute";
      let width = dragDom.style.width;
      if (width.includes("%")) {
        width = +document.body.clientWidth * (+width.replace(/\%/g, "") / 100);
      } else {
        width = +width.replace(/\px/g, "");
      }
      dragDom.style.left = `${
        (mainBoxs.clientWidth - dragDom.clientWidth) / 2
      }px`;

      dialogHeaderEl.onmousedown = (e) => {
        // console.log(e);
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft;
        const disY = e.clientY - dialogHeaderEl.offsetTop;

        // 获取到的值带px 正则匹配替换
        let styL, styT;
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        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) {
          // console.log(e);
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX;
          const t = e.clientY - disY;
          // 计算右边和底部的边界
          const maxRight = mainBoxs.clientWidth - dragDom.clientWidth;
          const maxBottom = mainBoxs.clientHeight - dragDom.clientHeight;

          // 将计算好的边界值赋值，styX代表X轴移动, styY代表Y轴移动
          let styX = 0,
            styY = 0;
          styX = l + styL;
          styY = t + styT;
          if (styX < 0) {
            styX = 0;
          }
          if (styY < 0) {
            styY = 0;
          }
          if (styX > maxRight) {
            styX = maxRight;
          }
          if (styY > maxBottom) {
            styY = maxBottom;
          }
          // 移动当前元素
          dragDom.style.left = `${styX}px`;
          dragDom.style.top = `${styY}px`;
          // 将位置坐标显示到dom上
          dialogHeaderEl.innerHTML = `X:${styX},Y:${styY}`;
        };
        document.onmouseup = function (e) {
          // console.log(e);
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },


//最后在Dom渲染完成之后调用函数方法
  mounted() {
    this.moveFun();
  },