多个el-dialog嵌套后 .el-dialog_body样式如何根据不同el-dialog区分设置

可以通过给每个 `el-dialog` 组件添加一个不同的 `class`，然后使用该 `class` 来区分设置不同的样式。

例如，假设你有两个 `el-dialog` 组件，一个是 `dialog-1`，另一个是 `dialog-2`，你可以给它们分别加上不同的 `class`：

<el-dialog class="dialog-1">
  ...
</el-dialog>

<el-dialog class="dialog-2">
  ...
</el-dialog>

然后在 CSS 中，你可以通过选择器来对不同的 `el-dialog` 组件进行不同的样式设置：

.dialog-1 .el-dialog__body {
  /* 设置 dialog-1 中 el-dialog__body 的样式 */
}

.dialog-2 .el-dialog__body {
  /* 设置 dialog-2 中 el-dialog__body 的样式 */
}

这样就可以根据不同的 `class` 区分设置不同的样式了。

相关问题

el-dialog嵌套，关闭第二个el-dialog，第一个el-dialog的按钮点击不了

根据提供的引用内容，el-dialog嵌套时，如果关闭第二个el-dialog，可能会导致第一个el-dialog的按钮无法点击。这是因为第二个el-dialog被关闭后，遮罩层仍然存在，导致无法点击第一个el-dialog的按钮。

解决这个问题的方法是给第二个el-dialog添加append-to-body属性，并将其设置为true。这样，第二个el-dialog会插入到body元素上，保证了内外层el-dialog和遮罩层级关系的正确。

另外，也可以考虑使用el-dialog和ElMessageBox结合的形式，这样就不会出现弹窗被遮住的问题。

以下是一个示例代码，演示了el-dialog嵌套时关闭第二个el-dialog后，第一个el-dialog的按钮可以正常点击：

<template>
  <div>
    <el-dialog
      title="第一个el-dialog"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <p>第一个el-dialog的内容</p>
      <el-button type="primary" @click="openDialog2">打开第二个el-dialog</el-button>
    </el-dialog>

    <el-dialog
      title="第二个el-dialog"
      :visible.sync="dialogVisible2"
      width="30%"
      :append-to-body="true"
    >
      <p>第二个el-dialog的内容</p>
      <el-button type="primary" @click="closeDialog2">关闭第二个el-dialog</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false
    };
  },
  methods: {
    openDialog2() {
      this.dialogVisible2 = true;
    },
    closeDialog2() {
      this.dialogVisible2 = false;
    }
  }
};
</script>

el-dialog 嵌套的 el-drawer 拖拽后样式问题

### 解决 `el-dialog` 嵌套 `el-drawer` 拖拽后的样式问题

当在 `Element UI` 中使用 `el-dialog` 和 `el-drawer` 组件时，可能会遇到拖拽操作后样式错乱的问题。为了修复这一问题，可以通过自定义 CSS 样式以及调整组件属性来实现更好的用户体验。

#### 自定义 CSS 样式

通过覆盖默认的 CSS 类名，可以确保拖拽过程中不会影响到其他布局元素。具体来说，在项目中添加全局或局部的样式规则：

/* 调整 dialog 的位置 */
.el-dialog {
    position: fixed;
}

/* 防止 drawer 内部滚动条消失 */
.el-drawer__body {
    overflow-y: auto !important;
}

这些样式能够帮助保持对话框的位置固定，并允许抽屉内部的内容正常滚动[^1]。

#### 修改 JavaScript 行为

如果发现仅靠 CSS 不足以解决问题，则可以在 Vue 实例内监听事件并动态修改 DOM 结构或者类名。例如，利用钩子函数处理打开关闭状态变化时的行为逻辑：

// 在 mounted 生命周期里绑定 mousemove 事件用于检测鼠标移动距离从而计算偏移量
mounted() {
    document.addEventListener('mousemove', this.handleMouseMove);
},
methods: {
    handleMouseMove(event) {
        // 计算新的 top/left 值...
        const newX = event.clientX - initialX; 
        const newY = event.clientY - initialY;

        // 更新 element-ui 对应实例的数据模型里的 position 属性值
        this.$refs.dialogRef.setPosition({ x: newX, y: newY });
    }
}

此方法适用于更复杂的交互场景，比如需要精确控制拖动范围等情况[^2]。

#### 使用第三方库辅助开发

对于复杂的应用程序而言，引入专门针对可拖放特性的插件可能是更为简便的选择之一。像 SortableJS 或者 vue-draggable-next 这样的工具可以帮助简化代码编写过程的同时也提供了丰富的配置选项支持多种需求。

---