el-dialog（element-plus） 嵌套拖拽的显示问题

问题

dialog 嵌套时外层dialog拖拽后再打开里程dialog
里层dialog的最大可视区域变成了外层dialog 而不是浏览器

原因

el-dialog的拖拽使用了 transform属性

W3C对transform有这样的描述css-transform-rendering

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

总结起来，当transform属性的值不为none时，元素会创建一个包含块，并使用其内边距框来布局所有绝对定位的后代元素、固定定位的后代元素和后代元素的固定背景附件。

解决

1.平级使用el-dialog

<!-- <el-dialog draggable v-model="visble1" width="500px">
  这是第一个对话框
  <el-dialog draggable v-model="visble2" width="400px">
    这是第2个对话框
  </el-dialog>
  <el-button @click="open2">打开</el-button>
</el-dialog> -->
<el-dialog draggable v-model="visble1" width="500px">
  这是第一个对话框
  <el-button @click="open2">打开</el-button>
</el-dialog>
<el-dialog draggable v-model="visble2" width="400px">
  这是第2个对话框
</el-dialog>

2.使用 append-to-body

这种方式在html表现中也就是平级使用el-dialog

<el-dialog append-to-body draggable v-model="visble1" width="500px">
  这是第一个对话框
  <el-dialog draggable v-model="visble2" width="400px">
    这是第2个对话框
  </el-dialog>
  <el-button @click="open2">打开</el-button>
</el-dialog>

最后

还有别的更好的方法解决这事情吗