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

网页加载时页面显示进度条加载完成之后显示网页内容

Dec 23 Javascript

JS使用replace()方法和正则表达式进行字符串的搜索与替换实例

Apr 10 Javascript

js获取下拉列表的值和元素个数示例

May 07 Javascript

JsRender for index循环索引用法详解

Oct 31 Javascript

node.js中的fs.lchownSync方法使用说明

Dec 16 Javascript

如何使用HTML5地理位置定位功能

Apr 27 Javascript

JS留言功能的简单实现案例(推荐)

Jun 23 Javascript

详解使用angular-cli发布i18n多国语言Angular应用

May 20 Javascript

vue.js组件之间传递数据的方法

Jul 10 Javascript

js中this对象用法分析

Jan 05 Javascript

全面解析JavaScript Module模式

Jul 24 Javascript

JavaScript中的几种继承方法示例

Dec 06 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实现简单ajax Loading加载功能示例

2016/12/28 PHP

PHP+jQuery实现即点即改功能示例

2019/02/21 PHP

CheckBox 如何实现全选？

2006/06/23 Javascript

jquery validator 插件增加日期比较方法

2010/02/21 Javascript

javascript类型转换使用方法

2014/02/08 Javascript

利用jQuery和CSS将背景图片拉伸

2015/10/16 Javascript

JavaScript实现删除数组重复元素的5种常用高效算法总结

2018/01/18 Javascript

详解vue2.0模拟后台json数据

2019/05/16 Javascript

[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6

2018/06/07 DOTA

Python脚本实现集群检测和管理功能

2015/03/06 Python

python if not in 多条件判断代码

2016/09/21 Python

python生成式的send()方法(详解)

2017/05/08 Python

python中lambda()的用法

2017/11/16 Python

python3 打印输出字典中特定的某个key的方法示例

2019/07/06 Python

Python实现子类调用父类的初始化实例

2020/03/12 Python

Python socket连接中的粘包、精确传输问题实例分析

2020/03/24 Python

Python QTimer实现多线程及QSS应用过程解析

2020/07/11 Python

浅析python 通⽤爬⾍和聚焦爬⾍

2020/09/28 Python

英国鞋类及配饰零售商：Kurt Geiger

2017/02/04 全球购物

Lookfantastic瑞典：英国知名美妆购物网站

2018/04/06 全球购物

美丽的现代设计家具：2Modern

2018/07/26 全球购物

英国在线女鞋目的地：SIMMI

2018/12/27 全球购物

2013年保送生自荐信格式

2013/11/20 职场文书

学生自我鉴定

2013/12/18 职场文书

部队学习十八大感言

2014/01/11 职场文书

拉拉队口号

2014/06/16 职场文书

银行求职自荐书

2014/06/25 职场文书

好的旅游活动方案

2014/08/19 职场文书

2014年财务工作自我评价

2014/09/23 职场文书

员工教育培训协议书

2014/09/27 职场文书

四风问题个人剖析材料

2014/10/07 职场文书

群众路线专项整治工作情况报告

2014/10/28 职场文书

运动会100米加油稿

2015/07/21 职场文书

创业计划书之健康营养产业

2019/10/15 职场文书

手残删除python之后的补救方法

2021/06/26 Python

tree shaking对打包体积优化及作用

2022/07/07 Java/Android