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


Posted in Javascript onNovember 19, 2020

要实现的效果如下:

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)

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

Javascript 相关文章推荐
js随机颜色代码的多种实现方式
Apr 23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
vue权限问题的完美解决方案
May 08 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
JavaScript实现电灯开关小案例
Mar 30 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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python SQLite3简介
2018/02/22 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python requests模块实例用法
2019/02/11 Python
树莓派实现移动拍照
2019/06/22 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Python虚拟环境venv用法详解
2020/05/25 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
网络技术专业推荐信
2014/02/20 职场文书
小学教师寄语大全
2014/04/03 职场文书
责任担保书范文
2014/05/21 职场文书
交通事故协议书范本
2014/11/18 职场文书
公司开会通知
2015/04/20 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js