当前位置: 首页 > Web前端 > vue.js

elmentUI同一页面显示多个Dialog

时间:2023-03-31 23:40:11 vue.js

的效果如下:首先,官方文档是这样描述的:但是我写了一个小demo,发现不能直接放在同一层,而且还会有顺序不同导致的覆盖和遮罩层导致无法点击被遮罩的dialog。原因如下:因为dialog的顺序不同,z-index设置的高低不同,所以一定要覆盖遮挡。要实现这样的效果,我们不仅可以水平放置,还可以在里面使用一个属性:在modal下面粘贴代码:大致思路是:dialog的顺序重叠,使用offset让它们错开;那么遮罩层使得z-index级别低的弹框无法点击,所以需要用modal关闭z-index级别高的遮罩层。(您还可以使用close-on-click-modal通过单击模态来取消关闭对话框)