ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他el-dialog的关闭按钮会导致该对话框关闭

当你在Element UI + Vue项目中遇到这样的问题，即点击了外部的另一个`el-dialog`的关闭按钮会意外地关闭当前对话框，这通常是由于`el-dialog`默认的行为设置导致的。`el-dialog`有一个名为`close-on-click-modal`的属性，默认值为`true`，这意味着当用户点击对话框之外的地方（包括另一个对话框）时，它会自动关闭。

要解决这个问题，你需要禁用这个特性。这里是如何操作的：

1. 首先，在你的Vue组件中引入`ElementUI`并禁用`close-on-click-modal`属性，例如在`data()`函数里初始化：

export default {
  data() {
    return {
      dialogProps: {
        closeOnPressEscape: true, // 保留ESC关闭功能
        closeOnClickModal: false, // 关闭对话框时不响应点击模态区域
      },
    };
  },
};

2. 当创建`el-dialog`实例时，传递这个自定义属性：

<el-dialog v-model="dialogVisible" :props="dialogProps">
  <!-- ... -->
</el-dialog>

通过以上步骤，当用户点击另一个`el-dialog`的关闭按钮时，当前对话框将不会被关闭。