编程 Javascript

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

Posted in Javascript onNovember 19, 2020

要实现的效果如下：

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

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）

到此这篇关于elementUI同一页面展示多个Dialog的实现的文章就介绍到这了,更多相关elementUI多Dialog内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

rirmk

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript window对象属性整理

Oct 24 Javascript

Jquery 最近浏览过的商品的功能实现代码

May 14 Javascript

js怎么终止程序return不行换jfslk

May 30 Javascript

JS 获取浏览器和屏幕宽高等信息的实现思路及代码

Jul 31 Javascript

JQuery实现防止退格键返回的方法

Feb 12 Javascript

jQuery点击按钮弹出遮罩层且内容居中特效

Dec 14 Javascript

详谈javascript异步编程

Feb 21 Javascript

第六篇Bootstrap表格样式介绍

Jun 21 Javascript

JS查找字符串中出现次数最多的字符

Sep 05 Javascript

javaScript基础详解

Jan 19 Javascript

vue2.0 实现导航守卫（路由守卫）

May 21 Javascript

JS实现页面炫酷的时钟特效示例

Aug 14 Javascript

微信小程序实现点击导航标签滚动定位到对应位置

Nov 19 #Javascript

深入了解Vue3模板编译原理

Nov 19 #Vue.js

微信小程序实现倒计时功能

Nov 19 #Javascript

微信小程序实现列表左右滑动

Nov 19 #Javascript

详解JavaScript 中的批处理和缓存

Nov 19 #Javascript

Javascript中window.name属性详解

Nov 19 #Javascript

JavaScript实现图片合成下载的示例

Nov 19 #Javascript

You might like

如何在PHP中使用Oracle数据库(1)

2006/10/09 PHP

php中根据某年第几天计算出日期年月日的代码

2011/02/24 PHP

Yii2隐藏frontend/web和backend/web的方法

2015/12/12 PHP

基于swoole实现多人聊天室

2018/06/14 PHP

JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

2013/01/23 Javascript

js判断鼠标同时离开两个div的思路及代码

2013/05/31 Javascript

js内存泄露的几种情况详细探讨

2013/05/31 Javascript

Jquery选择子控件"大于号"和" "区别介绍及使用示例

2013/06/25 Javascript

JS验证日期的格式YYYY-mm-dd 具体实现

2013/06/29 Javascript

javascript设置文本框光标的方法实例小结

2016/11/04 Javascript

javascript设计模式之中介者模式学习笔记

2017/02/15 Javascript

基于vue的换肤功能的示例代码

2017/10/10 Javascript

如何使用pm2快速将项目部署到远程服务器

2019/03/12 Javascript

Nuxt页面级缓存的实现

2020/03/09 Javascript

微信小程序中的上拉、下拉菜单功能

2020/03/13 Javascript

[02:04]2018DOTA2亚洲邀请赛Secret赛前采访

2018/04/03 DOTA

python获取网页状态码示例

2014/03/30 Python

python连接oracle数据库实例

2014/10/17 Python

Python调用SQLPlus来操作和解析Oracle数据库的方法

2016/04/09 Python

查看Django和flask版本的方法

2018/05/14 Python

TensorFlow 滑动平均的示例代码

2018/06/19 Python

对Python通过pypyodbc访问Access数据库的方法详解

2018/10/27 Python

对python多线程中Lock()与RLock()锁详解

2019/01/11 Python

python try 异常处理(史上最全）

2019/03/07 Python

python进程间通信Queue工作过程详解

2019/11/01 Python

Python参数传递机制传值和传引用原理详解

2020/05/22 Python

了解一下python内建模块collections

2020/09/07 Python

Ben Sherman官方网站：英国男装品牌

2019/10/22 全球购物

小学教育毕业生自荐信

2013/11/18 职场文书

办公室综合文员岗位职责范本

2014/02/13 职场文书

出纳会计岗位职责

2014/03/12 职场文书

参赛口号

2014/06/16 职场文书

2015年销售工作总结范文

2015/03/30 职场文书

个人工作违纪检讨书

2015/05/05 职场文书

大学毕业生自我鉴定范文

2019/06/21 职场文书

windows11怎么查看wifi密码? win11查看wifi密码的技巧

2021/11/21 数码科技