在vue的dialog中嵌套dialog,彈出里層的dialog時,發現被dialog的遮罩層擋住了,如下所示:
官方文檔中的嵌套dialog例子指出了原因:
對於確實需要嵌套 Dialog 的場景,提供了append-to-body屬性。將內層 Dialog 的該屬性設置為 true,它就會插入至 body 元素上,從而保證內外層 Dialog 和遮罩層級關系的正確。
將內層嵌套的dialog封裝成了外層dialog的子組件,內層dialog的代碼如下:
如上面所示,加入了 append-to-body 屬性。
頁面效果如下: