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

AJAX的跨域与JSONP(为文章自动添加短址的功能)

Jan 17 Javascript

在Node.js中实现文件复制的方法和实例

Jun 05 Javascript

JQuery动画与特效实例分析

Feb 02 Javascript

JavaScript 正则表达式中global模式的特性

Feb 25 Javascript

详解Javascript ES6中的箭头函数(Arrow Functions)

Aug 24 Javascript

微信小程序 less文件编译成wxss文件实现办法

Dec 05 Javascript

jquery append与appendTo方法比较

May 24 jQuery

详解Angular-cli生成组件修改css成less或sass的实例

Jul 27 Javascript

Vue.js实现大转盘抽奖总结及实现思路

Oct 09 Javascript

js实现批量删除功能

Aug 27 Javascript

Openlayers实现测量功能

Sep 25 Javascript

通过实例解析json与jsonp原理及使用方法

Sep 27 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常用字符串的总结(待续)

2013/06/07 PHP

php mysql_real_escape_string函数用法与实例教程

2013/09/30 PHP

2015/03/24 PHP

PHP使用Redis替代文件存储Session的方法

2017/02/15 PHP

javascript new 需不需要继续使用

2009/07/02 Javascript

jquery实现的图片点击滚动效果

2014/04/29 Javascript

jQuery实现瀑布流的取巧做法分享

2015/01/12 Javascript

JavaScript AOP编程实例

2015/06/16 Javascript

jQuery实现的类似淘宝网站搜索框样式代码分享

2015/08/24 Javascript

JavaScript计划任务后台运行的方法

2015/12/18 Javascript

javascript实现简易计算器的代码

2016/05/31 Javascript

详解vue-router 2.0 常用基础知识点之router.push()

2017/05/10 Javascript

JS库之Waypoints的用法详解

2017/09/13 Javascript

webpack3之loader全解析

2017/10/26 Javascript

JS实现提交表单前的数字及邮箱校检功能

2017/11/13 Javascript

微信小程序实现YDUI的ScrollTab组件

2018/02/02 Javascript

webpack打包多页面的方法

2018/11/30 Javascript

微信小程序在ios下Echarts图表不能滑动的问题解决

2019/07/10 Javascript

微信小程序canvas绘制圆角base64图片的实现

2019/08/18 Javascript

vue el-tree 默认展开第一个节点的实现代码

2020/05/15 Javascript

vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip

2020/06/02 Javascript

[55:45]LGD vs OG 2019国际邀请赛淘汰赛胜者组 BO3 第三场 8.24

2019/09/10 DOTA

简单介绍Python中的struct模块

2015/04/28 Python

python插入排序算法实例分析

2015/07/03 Python

Python实现的递归神经网络简单示例

2017/08/11 Python

详解Python3注释知识点

2019/02/19 Python

python 模拟登陆github的示例

2020/12/04 Python

Clarks鞋法国官方网站：英国其乐鞋品牌

2018/02/11 全球购物

Lacoste澳大利亚官网：服装、鞋类及配饰

2018/11/14 全球购物

护理学毕业生自荐信

2013/10/02 职场文书

七匹狼男装广告词

2014/03/21 职场文书

小学优秀教育工作者事迹材料

2014/05/09 职场文书

老兵退伍标语

2014/10/07 职场文书

2014乡党委副书记党建工作汇报材料

2014/11/02 职场文书

避暑山庄导游词

2015/02/04 职场文书

python利用while求100内的整数和方式

2021/11/07 Python