elementui中el-dialog拖动效果并且拖动位置不可超出可视区域

要在elementui中使用el-dialog拖动效果并且拖动位置不可超出可视区域，可以通过以下步骤实现：

1. 在el-dialog组件中添加一个v-dialog-drag指令，用于启用拖动功能。

2. 在v-dialog-drag指令中添加dragDialog方法，用于处理拖动过程中的相关逻辑。

3. 在dragDialog方法中，通过计算鼠标的偏移量和el-dialog的初始位置，计算出el-dialog的新位置，并将其限制在可视区域内。

下面是一个示例代码，可以参考实现：

<template>
  <el-dialog
    title="Dialog"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    v-dialog-drag
  >
    <p>Dialog Content</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogLeft: 0,
      dialogTop: 0,
      mouseX: 0,
      mouseY: 0,
      dialogWidth: 0,
      dialogHeight: 0,
      windowWidth: 0,
      windowHeight: 0
    };
  },
  directives: {
    "dialog-drag": {
      bind(el, binding, vnode) {
        const dialogHeaderEl = el.querySelector(".el-dialog__header");
        const dragDom = el.querySelector(".el-dialog");

        dialogHeaderEl.style.cursor = "move";

        // 获取元素样式，兼容IE
        const getStyle = (function() {
          if (window.document.currentStyle) {
            return (dom, attr) => dom.currentStyle[attr];
          } else {
            return (dom, attr) => getComputedStyle(dom, false)[attr];
          }
        })();

        dialogHeaderEl.onmousedown = e => {
          // 鼠标按下，计算当前元素距离可视区的距离
          this.mouseX = e.clientX;
          this.mouseY = e.clientY;
          this.dialogLeft = parseInt(getStyle(dragDom, "left"));
          this.dialogTop = parseInt(getStyle(dragDom, "top"));

          // 获取当前元素的宽度和高度
          this.dialogWidth = dragDom.offsetWidth;
          this.dialogHeight = dragDom.offsetHeight;

          // 获取可视区的宽度和高度
          this.windowWidth = document.documentElement.clientWidth;
          this.windowHeight = document.documentElement.clientHeight;

          // 绑定拖动事件
          document.onmousemove = this.dragDialog;
          document.onmouseup = this.mouseUp;
        };
      }
    }
  },
  methods: {
    dragDialog(e) {
      // 计算移动后的位置
      let newLeft = e.clientX - this.mouseX + this.dialogLeft;
      let newTop = e.clientY - this.mouseY + this.dialogTop;

      // 限制移动范围
      if (newLeft < 0) {
        newLeft = 0;
      } else if (newLeft > this.windowWidth - this.dialogWidth) {
        newLeft = this.windowWidth - this.dialogWidth;
      }

      if (newTop < 0) {
        newTop = 0;
      } else if (newTop > this.windowHeight - this.dialogHeight) {
        newTop = this.windowHeight - this.dialogHeight;
      }

      // 移动元素
      const dragDom = document.querySelector(".el-dialog");
      dragDom.style.left = newLeft + "px";
      dragDom.style.top = newTop + "px";
    },
    mouseUp() {
      // 解绑拖动事件
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
};
</script>

在上面的代码中，我们定义了一个自定义指令v-dialog-drag，并在el-dialog组件中使用它来启用拖动功能。在v-dialog-drag指令中，我们绑定了dialogHeaderEl元素的mousedown事件，并在事件处理程序中实现了拖动逻辑。我们使用getStyle方法获取元素的样式，然后计算出鼠标移动后的位置，并将其限制在可视区域内。最后，我们通过设置dragDom元素的left和top样式来实现元素的移动。