elementui中el-dialog拖动不可超出可视区域

要实现el-dialog拖动不可超出可视区域，可以通过以下步骤实现：

1. 使用el-dialog的drag指令，将dialog设置为可拖动。
2. 监听dialog的drag事件，获取dialog的位置信息。
3. 获取当前可视区域的大小和位置信息。
4. 判断dialog是否超出可视区域，如果超出则将dialog的位置设置为可视区域的边界。

下面是示例代码：

<template>
  <el-dialog v-model="dialogVisible" :drag="dragDialog">
    <p>这是一个可以拖动的Dialog</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dragDialog: {
        containment: 'document', // 指定拖动范围为整个文档
      },
    };
  },
  mounted() {
    // 监听dialog的drag事件
    this.$refs.dialog.$el.addEventListener('drag', this.handleDialogDrag);
  },
  methods: {
    handleDialogDrag(event) {
      // 获取dialog的位置信息
      const dialogRect = this.$refs.dialog.$el.getBoundingClientRect();
      const dialogLeft = dialogRect.left;
      const dialogTop = dialogRect.top;

      // 获取当前可视区域的大小和位置信息
      const clientWidth = document.documentElement.clientWidth;
      const clientHeight = document.documentElement.clientHeight;
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

      // 判断dialog是否超出可视区域
      let left = dialogLeft;
      let top = dialogTop;
      if (dialogLeft < scrollLeft) {
        left = scrollLeft;
      } else if (dialogLeft + dialogRect.width > scrollLeft + clientWidth) {
        left = scrollLeft + clientWidth - dialogRect.width;
      }
      if (dialogTop < scrollTop) {
        top = scrollTop;
      } else if (dialogTop + dialogRect.height > scrollTop + clientHeight) {
        top = scrollTop + clientHeight - dialogRect.height;
      }

      // 将dialog的位置设置为可视区域的边界
      this.$refs.dialog.$el.style.left = `${left}px`;
      this.$refs.dialog.$el.style.top = `${top}px`;
    },
  },
};
</script>

在上面的代码中，我们通过设置drag指令将dialog设置为可拖动。然后监听dialog的drag事件，在事件处理函数中获取dialog的位置信息和当前可视区域的大小和位置信息，判断dialog是否超出可视区域，如果超出则将dialog的位置设置为可视区域的边界。