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

TopList标签和JavaScript结合两例

Aug 12 Javascript

JavaScript 布尔操作符解析 && || ！

Aug 10 Javascript

js实现感应鼠标图片透明度变化的方法

Feb 20 Javascript

Javascript实现飞动广告效果的方法

May 25 Javascript

深入浅析JavaScript面向对象和原型函数

Feb 06 Javascript

JQuery的常用选择器、过滤器、方法全面介绍

May 25 Javascript

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

Feb 22 Javascript

解决vue打包之后静态资源图片失效的问题

Feb 21 Javascript

JavaScript事件发布/订阅模式原理与用法分析

Aug 21 Javascript

从零搭一个自用的前端脚手架的方法步骤

Sep 23 Javascript

layer关闭弹出窗口触发表单提交问题的处理方法

Sep 25 Javascript

微信小程序以7天为周期连续签到7天功能效果的示例代码

Aug 20 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 存取 MySQL 数据库的一个例子

2006/10/09 PHP

php 获得汉字拼音首字母的函数

2009/08/01 PHP

php实现快速排序的三种方法分享

2014/03/12 PHP

PHP图片等比缩放类SimpleImage使用方法和使用实例分享

2014/04/10 PHP

php 猴子摘桃的算法

2017/06/20 PHP

JavaScript 模拟用户单击事件

2009/12/31 Javascript

海量经典的jQuery插件集合

2010/01/12 Javascript

基于jquery实现的鼠标滑过按钮改变背景图片

2011/07/15 Javascript

JS特殊函数(Function()构造函数、函数直接量)区别介绍

2013/05/19 Javascript

jquery实现点击文字可编辑并修改保存至数据库

2014/04/15 Javascript

javascript制作坦克大战全纪录（2）

2014/11/27 Javascript

纯javascript实现的小游戏《Flappy Pig》实例

2015/07/27 Javascript

JavaScript实现可拖拽的拖动层Div实例

2015/08/05 Javascript

js实现的下拉框二级联动效果

2016/04/30 Javascript

微信小程序购物商城系统开发系列-工具篇的介绍

2016/11/21 Javascript

详解Bootstrap各式各样的按钮(推荐)

2016/12/13 Javascript

Vue.js 2.0学习教程之从基础到组件详解

2017/04/24 Javascript

Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

2017/12/23 Javascript

深入了解响应式React Native Echarts组件

2019/05/29 Javascript

解决vue v-for src 图片路径问题 404

2019/11/12 Javascript

开发Node CLI构建微信小程序脚手架的示例

2020/03/27 Javascript

swiper实现导航滚动效果

2020/12/13 Javascript

python字符串中匹配数字的正则表达式

2019/07/03 Python

TensorFlow车牌识别完整版代码（含车牌数据集）

2019/08/05 Python

Python FtpLib模块应用操作详解

2019/12/12 Python

Python实现i人事自动打卡的示例代码

2020/01/09 Python

开放系统互连参考模型

2016/06/29 面试题

个人找工作自荐信格式

2013/09/21 职场文书

顶岗实习计划书

2014/01/10 职场文书

工程资料员岗位职责

2014/03/10 职场文书

主管竞聘书范文

2014/03/31 职场文书

节约用水演讲稿

2014/05/21 职场文书

广告设计专业毕业生自我鉴定

2014/09/27 职场文书

优化经济发展环境工作总结

2015/08/11 职场文书

Java中CyclicBarrier和CountDownLatch的用法与区别

2021/08/23 Java/Android

请求模块urllib之PYTHON爬虫的基本使用

2022/04/08 Python