编程 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 相关文章推荐

云网广告中的代码，提示出错，大家找找

Nov 21 Javascript

Jquery post传递数组方法实现思路及代码

Apr 28 Javascript

JavaScript中的console.trace()函数介绍

Dec 29 Javascript

jquery实现全屏滚动

Dec 28 Javascript

基于原生JS实现图片裁剪

Aug 01 Javascript

值得分享的bootstrap table实例

Sep 22 Javascript

Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

Dec 13 Javascript

解决angular2 获取到的数据无法实时更新的问题

Aug 31 Javascript

在JS循环中使用async/await的方法

Oct 12 Javascript

Node.js中console.log()输出彩色字体的方法示例

Dec 01 Javascript

详解搭建一个vue-cli的移动端H5开发模板

Jan 17 Javascript

vue 子组件和父组件传值的示例

Sep 11 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程序员面试切忌急功近利(更需要注重以后的发展)

2010/09/01 PHP

php获取$_POST同名参数数组的实现介绍

2013/06/30 PHP

PHP中一些可以替代正则表达式函数的字符串操作函数

2014/11/17 PHP

php表单敏感字符过滤类

2014/12/08 PHP

理清PHP在Linxu下执行时的文件权限方法

2017/06/07 PHP

php微信扫码支付 php公众号支付

2019/03/24 PHP

javascript里绝对用的上的字符分割函数总结

2014/07/31 Javascript

jquery.fastLiveFilter.js实现输入自动过滤的方法

2015/08/11 Javascript

javascript日期格式化方法小结

2015/12/17 Javascript

vue2.0开发实践总结之疑难篇

2016/12/07 Javascript

js脚本编写简单刷票投票系统

2017/06/27 Javascript

详解基于Node.js的HTTP/2 Server实践

2018/05/31 Javascript

vue头部导航动态点击处理方法

2018/11/02 Javascript

基于vue手写tree插件的那点事儿

2019/08/20 Javascript

nodejs使用node-xlsx生成excel的方法示例

2019/08/22 NodeJs

微信小程序实现菜单左右联动

2020/05/19 Javascript

解决VueCil代理本地proxytable无效报错404的问题

2020/11/07 Javascript

Python使用设计模式中的责任链模式与迭代器模式的示例

2016/03/02 Python

Python文本相似性计算之编辑距离详解

2016/11/28 Python

Python爬取网页中的图片（搜狗图片）详解

2017/03/23 Python

Python3实现简单可学习的手写体识别(实例讲解)

2017/10/21 Python

浅谈机器学习需要的了解的十大算法

2017/12/15 Python

使用Python抓取豆瓣影评数据的方法

2018/10/17 Python

解决pycharm py文件运行后停止按钮变成了灰色的问题

2018/11/29 Python

Python文件打开方式实例详解【a、a+、r+、w+区别】

2019/03/30 Python

python统计字符的个数代码实例

2020/02/07 Python

Python参数传递对象的引用原理解析

2020/05/22 Python

Python调用JavaScript代码的方法

2020/10/27 Python

中学教师培训制度

2014/01/31 职场文书

商场消防安全责任书

2014/07/29 职场文书

领导班子个人查摆问题对照检查材料

2014/10/02 职场文书

基层党员群众路线整改措施及努力方向

2014/10/28 职场文书

2015年禁毒工作总结

2015/04/30 职场文书

100句拼搏进取的名言警句，值得一读！

2019/10/07 职场文书

初中运动会闭幕词范本3篇

2019/12/09 职场文书

Nginx+SpringBoot实现负载均衡的示例

2021/03/31 Servers