el-dialog 样式穿透 修改dialog样式 怎么修改 el-dialog 在body上如何不在body

如果 `el-dialog` 组件在 `body` 上，而你又不想让它在 `body` 上显示，可以通过设置 `modal-append-to-body` 属性来将遮罩层和弹窗插入到指定的元素上，而不是插入到 `body` 上。例如：

<template>
  <div>
    <el-button @click="showDialog">显示对话框</el-button>
    <div class="dialog-container"></div>
  </div>
</template>

<script>
export default {
  methods: {
    showDialog() {
      this.$dialog({
        title: '对话框标题',
        message: '对话框内容',
        modalAppendToBody: false, // 不插入到 body 上
        appendTo: '.dialog-container', // 插入到指定元素上
      });
    },
  },
};
</script>

在上面的例子中，设置了 `modalAppendToBody: false` 属性来阻止遮罩层和弹窗插入到 `body` 上，而是插入到 `.dialog-container` 元素上。注意，为了让元素正确地插入到指定的容器中，需要同时设置 `appendTo` 属性。

相关问题

el-dialog关闭按钮样式修改不影响其它el-dialog关闭按钮样式

您可以通过给该 el-dialog 组件的关闭按钮设置独立的 class 名称，然后在 CSS 样式表中针对该 class 名称进行样式设置，以达到修改该关闭按钮样式不影响其它 el-dialog 组件关闭按钮样式的目的。

具体做法如下：

1. 在 el-dialog 的组件标签上添加一个新的属性 `:close-button-class`，将其值设置为你想要设置的独立 class 名称，例如：

<el-dialog :close-button-class="my-close-button-class"></el-dialog>

2. 在 CSS 样式表中定义你设置的独立 class 名称对应的样式，例如：

.my-close-button-class {
  /* 在这里添加你想要设置的样式 */
}

这样，你就可以通过设置独立的 class 名称来修改 el-dialog 的关闭按钮样式，而不会影响其它 el-dialog 组件的关闭按钮样式了。

el-dialog点击穿透

对于el-dialog点击穿透的问题，可以尝试以下解决方法：

1. 使用`@click.stop`来阻止点击事件冒泡。在el-dialog组件上绑定@click.stop事件，这样点击el-dialog内部时不会触发父元素的点击事件。

<el-dialog @click.stop>
  <!-- 对话框内容 -->
</el-dialog>

2. 设置el-dialog的`lock-scroll`属性为false。默认情况下，el-dialog会阻止背景滚动，但这也可能导致点击穿透问题。可以将lock-scroll属性设置为false，允许背景滚动。

<el-dialog :lock-scroll="false">
  <!-- 对话框内容 -->
</el-dialog>