编程 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输出列表实现代码

Sep 12 Javascript

基于jquery 的一个progressbar widge

Oct 29 Javascript

最佳6款用于移动网站开发的jQuery 图片滑块插件小结

Jul 20 Javascript

Javascript学习笔记之相等符号与严格相等符号

Nov 23 Javascript

JavaScript数据类型学习笔记

Jan 25 Javascript

JS常用算法实现代码

Nov 14 Javascript

jQuery倒计时代码(超简单)

Feb 27 Javascript

解决ie img标签内存泄漏的问题

Oct 13 Javascript

详解nuxt sass全局变量(公共scss解决方案)

Jun 27 Javascript

jQuery使用bind动态绑定事件无效的处理方法

Dec 11 jQuery

微信小程序数据统计和错误统计的实现方法

Jun 26 Javascript

Vue.js中v-for指令的用法介绍

Mar 13 Vue.js

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

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

收音机发烧友应当熟知的100条知识

2021/03/02 无线电

PHP中Closure类的使用方法及详解

2015/10/09 PHP

php reset() 函数指针指向数组中的第一个元素并输出实例代码

2016/11/21 PHP

PHP实现留言板功能的详细代码

2017/03/25 PHP

thinkphp自定义权限管理之名称判断方法

2017/04/01 PHP

php实现文件上传基本验证

2020/03/04 PHP

PHP设计模式（七）组合模式Composite实例详解【结构型】

2020/05/02 PHP

input 高级限制级用法

2009/03/26 Javascript

js form 验证函数当前比较流行的错误提示

2009/06/23 Javascript

使用JQuery库提供的扩展功能实现自定义方法

2014/09/09 Javascript

基于jQuery插件jqzoom实现的图片放大镜效果示例

2017/01/23 Javascript

AngularJS学习第一篇 AngularJS基础知识

2017/02/13 Javascript

js 获取今天以及过去日期

2017/04/11 Javascript

Vue.js实现文章评论和回复评论功能

2020/05/30 Javascript

js 两个日期比较相差多少天的实例

2017/10/19 Javascript

Vue-cli 使用json server在本地模拟请求数据的示例代码

2017/11/02 Javascript

微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

2018/07/04 Javascript

Python基本语法经典教程

2016/03/11 Python

python+matplotlib绘制简单的海豚（顶点和节点的操作）

2018/01/02 Python

Python读取txt某几列绘图的方法

2018/10/14 Python

对python csv模块配置分隔符和引用符详解

2018/12/12 Python

wxPython实现绘图小例子

2019/11/19 Python

python实现感知机模型的示例

2020/09/30 Python

迪卡侬荷兰官网：Decathlon荷兰

2017/10/29 全球购物

Myprotein亚太地区：欧洲第一在线运动营养品牌

2020/12/20 全球购物

初中语文教学反思

2014/02/02 职场文书

大二法学专业职业生涯规划范文

2014/02/12 职场文书

年会搞笑主持词串词

2014/03/24 职场文书

网吧最新创业计划书范文

2014/03/27 职场文书

五水共治一句话承诺

2014/05/30 职场文书

有限责任公司股东合作协议书

2014/12/02 职场文书

2015军训通讯稿大全

2015/07/18 职场文书

员工旷工检讨书

2015/08/15 职场文书

幼儿园中班教学反思

2016/03/03 职场文书

pytorch中Schedule与warmup_steps的用法说明

2021/05/24 Python

Python中itertools库的四个函数介绍

2022/04/06 Python