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

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