el-dialog取消页面遮罩层

在Element UI库中，`el-dialog`用于创建可滑动的、模态的窗口，它通常包含一个对话框以及一个可以关闭它的按钮。有时我们希望在用户与对话框交互时保持整个页面可见，并允许背景操作，这就需要取消 `el-dialog` 的页面遮罩层。

取消 `el-dialog` 的页面遮罩层可以通过给 `el-dialog` 组件添加一些属性来实现：

### 使用 `modal-append-to-body`

默认情况下，当打开 `el-dialog` 时，会自动将遮罩层附着到浏览器的身体元素上（`body`），并阻止事件冒泡至顶层。通过在 `el-dialog` 中设置 `append-to-body="true"` 属性，你可以直接将遮罩层附加到 body 元素之外的位置，避免影响页面其余部分的操作。

<el-dialog append-to-body modal-append-to-body>
  <!-- 内容 -->
</el-dialog>

### 自定义遮罩层

如果你想完全自定义遮罩层的行为或样式，如完全禁用遮罩层，可以考虑使用外部的遮罩层组件，而不仅仅是依赖于 `el-dialog` 内置的机制。这可能涉及到使用更底层的 DOM 操作或第三方插件。

### 监听事件

如果你选择保留 `el-dialog` 的标准行为，但仍然想要取消某些特定情况下的遮罩层效果（例如，在对话框关闭时），你可以通过监听特定事件并在事件处理器中移除遮罩层。

#### 示例代码：

假设已经有一个全局的遮罩层控制函数：

function removeMask() {
  // 移除遮罩层代码，比如从 DOM 中移除遮罩元素
}

// 监听 dialog 关闭事件
new Vue({
  el: '#app',
  methods: {
    closeDialog() {
      this.$refs.dialog.close(); // 关闭对话框
      removeMask(); // 手动移除遮罩层
    }
  },
  components: {
    'el-dialog': ElDialog,
  },
  data() {
    return {
      dialog: {
        visible: false,
      },
    };
  },
  mounted() {
    // 初始化对话框引用
    this.$nextTick(() => {
      this.dialog.$mount('.dialog-wrapper');
    });
  },
});

在这个例子中，`closeDialog` 函数会在关闭对话框之后调用 `removeMask()` 函数来移除遮罩层。这种方法提供了一种灵活的方式来控制何时显示和隐藏遮罩层。

---