网络编程 
首页 > 网络编程 > 浏览文章

elementUI同一页面展示多个Dialog的实现

(编辑:jimmy 日期: 2024/12/28 浏览:3 次 )

要实现的效果如下:

elementUI同一页面展示多个Dialog的实现

首先官方文档是这样描述的:

elementUI同一页面展示多个Dialog的实现

但是我写了个小demo发现并不能直接平级放置即可,一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。

原因如下:因为dialog先后顺序不同z-index设置的层级不同,所以必定会覆盖遮挡

elementUI同一页面展示多个Dialog的实现

那么我们要实现一个这样的效果不仅仅平级放置即可,就要用到里面的一个属性:modal

elementUI同一页面展示多个Dialog的实现

下面贴上代码:

elementUI同一页面展示多个Dialog的实现

总的思路就是:dialog先后顺序重叠问题,使用便宜去让它们错开;然后就是遮罩层导致不能点击z-index层级低的弹框,就要用到modal去关闭z-index层级高的遮罩层。(还可以额外使用close-on-click-modal来取消通过点击 modal 关闭 Dialog)

上一篇:jQuery-App输入框实现实时搜索
下一篇:微信小程序实现点击导航标签滚动定位到对应位置
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap