el-dialog 里面套el-dialog 样式穿透了怎么办

如果你想在一个 `el-dialog` 中嵌套另一个 `el-dialog`，并且想要覆盖内部 `el-dialog` 的样式，可以尝试使用 `scoped` 属性来限定样式的作用范围。

具体来说，你可以在外层 `el-dialog` 的样式中使用 `::v-deep` 或 `/deep/` 伪类来穿透内部 `el-dialog` 的样式。例如：

<template>
  <el-dialog>
    <h3>外层弹窗</h3>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <h3>内层弹窗</h3>
    </el-dialog>
  </el-dialog>
</template>

<style scoped>
/* 外层弹窗样式 */
.el-dialog {
  /* 使用 ::v-deep 或 /deep/ 穿透内层弹窗的样式 */
  ::v-deep .el-dialog__title {
    color: red;
  }
}
</style>

在上面的例子中，我们使用 `::v-deep` 伪类来选择内部 `el-dialog` 的标题元素，并将其文字颜色设置为红色。这样，内部弹窗的样式就可以被成功覆盖了。

需要注意的是，`::v-deep` 伪类只在使用 `scoped` 属性时才会生效，如果你不使用 `scoped` 属性，那么可以使用 `/deep/` 伪类来达到同样的效果。

相关问题

el-dialog 样式穿透 修改dialog样式 怎么修改

在 Element UI 中使用 `el-dialog` 组件时，如果需要修改 `dialog` 样式，可以使用 `::v-deep` 或 `/deep/` 穿透组件样式。下面是一个例子：

/* 使用 ::v-deep 穿透 el-dialog 样式 */
::v-deep .el-dialog {
  border-radius: 10px;
}

/* 或者使用 /deep/ 穿透 el-dialog 样式 */
/deep/ .el-dialog {
  border-radius: 10px;
}

需要注意的是，使用 `/deep/` 穿透样式可能会影响到其他组件的样式，所以建议使用 `::v-deep`。另外，如果需要修改 `dialog` 的部分样式，比如标题、关闭按钮等，可以使用 `slot` 插槽来自定义。例如：

<el-dialog>
  <span slot="title">自定义标题</span>
  <span slot="close">X</span>
  <p>对话框内容</p>
</el-dialog>

在上面的例子中，使用了 `slot` 插槽来自定义对话框的标题和关闭按钮。

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>