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` 属性。

相关问题

element-ui如何修改el-dialog的修改样式

如果您想要自定义 Element UI 的 `el-dialog` 样式，有以下两种方式：

1. 使用 `scoped` CSS

在 `el-dialog` 组件上添加 `scoped` 属性，然后使用 CSS 来修改样式。例如：

<template>
  <el-dialog
    title="Dialog Title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    scoped
  >
    <p>Dialog Content</p>
  </el-dialog>
</template>

<style scoped>
.el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog__body {
  padding: 20px;
}
</style>

在上面的例子中，我们修改了 `el-dialog` 头部的背景色和字体颜色，以及内容区域的内边距。

2. 使用全局 CSS

在全局 CSS 文件中添加样式，来覆盖默认样式。例如：

.el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog__body {
  padding: 20px;
}

在这种方式下，所有使用 `el-dialog` 组件的地方都会应用这些样式。

需要注意的是，如果您使用了 `scoped` CSS，那么您需要在样式中使用 `/deep/` 或者 `>>>` 来穿透组件的作用域。例如：

<template>
  <el-dialog
    title="Dialog Title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    scoped
  >
    <p>Dialog Content</p>
  </el-dialog>
</template>

<style scoped>
.el-dialog /deep/ .el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog /deep/ .el-dialog__body {
  padding: 20px;
}
</style>

在上面的例子中，我们使用了 `/deep/` 来穿透 `el-dialog` 的作用域，来修改其样式。

.el-dialog__body修改不生效

可能有多种原因导致修改不生效，以下是几个可能的解决方案：

1. 确保你的样式定义在.el-dialog__body的样式之后，否则可能被覆盖。

2. 确保你使用的是正确的选择器，你可以使用浏览器的开发者工具检查样式是否被正确应用。

3. 确保你的样式没有被其他样式覆盖，你可以通过更具体的选择器或使用!important来解决这个问题。

4. 如果你使用了scoped样式，那么你需要在样式中添加/deep/或>>>来穿透作用域限制。

希望这些解决方案对你有所帮助。