Element: [dialog]请官方重新考虑一下dialog嵌套的问题

Created on 14 Mar 2017 · 24Comments · Source: ElemeFE/element

What is Expected?
官方一直强调的是dialog不应该使用嵌套的做法,可是在后台开发中,这个问题是无法避免的,如果dialog不能嵌套,假设一个极端一点的情况,如果一个网站的根组件是由dialog组成的(虽然有点夸张),那么所有需要使用dialog打开的子组件都要放置到跟根组件同级的地方

Source

chenweiqun

👍19

Most helpful comment

一种粗暴的方法：

把内层dialog移动到body下（和v-modal平级）
不算特别优雅但是能解决问题？我只试了两层嵌套。

<!-- component inside another el-dialog -->
<div>
  <el-dialog ref="dialog">
  </el-dialog>
</div>

mounted() {
  document.body.appendChild(this.$refs.dialog.$el);
}

wacky6 on 15 May 2017

👍15 ❤4 😄4 🎉3 😕1

All 24 comments

建议官方加入dialog嵌套支持

业务组件：订单列表组件OrderList，内嵌订单详情组件 OrderDetails ,根据需要用 Dialog 显示，
结构示意为

<OrderList>
  <table></table>
  <el-dialog>
       <OrderDetails><OrderDetails>
  </el-dialog>
<OrderList>

而OrderList组件也可能是通过Dialog显示出来的，比如：

<body>
<InvoiceList>
  <el-dialog>
       <OrderList><OrderList>
  </el-dialog>
</invoiceList>
</body>

业务组件的层级是动态生成的，在不同的业务场景下嵌套关系也不一样，并不能简单的将Dialog打平到一层。
如果Dialog组件支持嵌套，业务组件的实现就很容易了。

vboyok on 15 Mar 2017

我遇到嵌套的时候，遮罩bug；
最上层的dialog的遮罩会把整个页面罩住，无奈选择将最上层dialog的modal改为false来凑合了；

zhangzhikun on 29 Mar 2017

👍4

我也希望能嵌套，由于我所有编辑页面都是弹窗的，在所难免是需要嵌套，建议官方出个方案

bysir-zl on 29 Mar 2017

同样希望有一个解决方案，今天写后台管理系统的时候遇到同3楼一样的bug，最外层的dialog会出现bug，解决办法就是将最外层dialog的modal设置为false

zysallen on 31 Mar 2017

为了兼容这个，我已经把所有的modal改为了false，然后自己写了一层遮罩。还是希望官方能支持嵌套

rossroma on 31 Mar 2017

try this element-dialog2

foolishchow on 19 Apr 2017

一种粗暴的方法：

把内层dialog移动到body下（和v-modal平级）
不算特别优雅但是能解决问题？我只试了两层嵌套。

<!-- component inside another el-dialog -->
<div>
  <el-dialog ref="dialog">
  </el-dialog>
</div>

mounted() {
  document.body.appendChild(this.$refs.dialog.$el);
}

wacky6 on 15 May 2017

👍15 ❤4 😄4 🎉3 😕1

同求解决方案。。el-dialog同一页面同级放置的话遮罩就正常，一旦嵌套了就不正常了。

shomychen on 16 Jun 2017

dialog里调用组件，组件里再弹出dialog。悲剧了。

iamnewsea on 22 Jun 2017

@Leopoldthecoder 这个要不要在大版本里面考虑一蛤？

wacky6 on 23 Jul 2017

@wacky6 下周的排期就包括了这个

Leopoldthecoder on 23 Jul 2017

👍8

有最新进展吗？

hitripod on 28 Aug 2017

已经实现了，在下一个大版本中发布

Leopoldthecoder on 28 Aug 2017

👍6

什么时候发布下一个大版本

bibichuan on 31 Aug 2017

看9月5号的更新，似乎并没有解决这个问题呢

xiaowan on 8 Sep 2017

9/5 1.4.4 还没有包含这个修正，请问有对应的 PR 或是 Commit 吗？需要的人可以先用

已经实现了，在下一个大版本中发布

hitripod on 10 Sep 2017

顶，等待下一个大版本发布。

xiongsongsong on 15 Sep 2017

1.4.5版本有更新这个功能吗，等着用呢....

xiaowan on 26 Sep 2017

请问 2.0 有纳入了吗？

jerrysdesign on 3 Oct 2017

http://element.eleme.io/2.0/#/zh-CN/component/dialog#qian-tao-de-dialog

Leopoldthecoder on 18 Oct 2017

👍1

dialog 嵌套问题应急解决方案 http://www.jianshu.com/p/358ec493c314

w-rudolph on 20 Oct 2017

@hitripod 2.0有 1.x 不会加入了

rhinonan on 26 Dec 2017

基于 https://github.com/ElemeFE/element/issues/3499#issuecomment-338137085

是不是要添加一下 remove环节不然的话
我注意到dom-tree 中会不断积累dialog的dom 而没有被回收

{
  mounted () {
    // el-dialog 嵌套问题应急解决方案
    // https://github.com/ElemeFE/element/issues/3499#issuecomment-301370224
    if (this.appendToBody) {
      document.body.appendChild(this.$refs.dialog.$el)
    }
  },

  beforeDestroy () {
    if (this.appendToBody) {
      document.body.removeChild(this.$refs.dialog.$el)
    }
  }
}