已处理vue框架 el-dialog标签中 v-dialogDrag属性拖动弹出层拖出窗口bug

1.新建一个弹出层.js文件

2.将下面内容写入新建的js文件中

import Vue from "vue";

Vue.directive("elDialogDrag", (el) => {
  const header = el.querySelector(".el-dialog__header");
  const main = el.querySelector(".el-dialog");
  header.style.cursor = "move";
  header.onmousedown = (e) => {
    // 上次鼠标弹起时X轴的偏移量
    let l = +main.style.left.replace(/px/, "");
    // 上次鼠标弹起时Y轴的偏移量
    let t = +main.style.top.replace(/px/, "");
    let x = e.pageX - l;
    let y = e.pageY - t;
    let markL = 0,
      markT = 0,
      markR = 0,
      markB = 0,
      offset = 10; // 偏移量
    document.onmousemove = (e) => {
      // 处理右边界
      if (main.offsetLeft + main.offsetWidth + offset >= el.offsetWidth) {
        markR === 0 && (markR = e.pageX - x);
        e.pageX - x < markR && (main.style.left = e.pageX - x + "px");
      } else if (main.offsetLeft > offset) {
        main.style.left = e.pageX - x + "px";
      } else {
        // 处理左边界
        markL === 0 && (markL = e.pageX - x);
        e.pageX - x > markL && (main.style.left = e.pageX - x + "px");
      }
      // 处理下边界
      if (main.offsetTop + main.offsetHeight + offset >= el.offsetHeight) {
        markB === 0 && (markB = e.pageY - y);
        e.pageY - y < markB && (main.style.top = e.pageY - y + "px");
      } else if (main.offsetTop > offset) {
        main.style.top = e.pageY - y + "px";
      } else {
        // 处理上边界
        markT === 0 && (markT = e.pageY - y);
        e.pageY - y > markT && (main.style.top = e.pageY - y + "px");
      }
    };
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
});

导入全局使用修复弹出层bug

import "@/utils/dialogDrag";

将vue框架中通用的标签v-dialogDrag属性改为 v-elDialogDrag

bug1： 处理弹出层第二次打开位置初始化

bug2：拖拽弹出层，遮罩把弹出层覆盖

不要将css样式写下图css样式