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

javascript 判断数组是否已包含了某个元素的函数

May 30 Javascript

JavaScript编写连连看小游戏

Jul 07 Javascript

JavaScript的设计模式经典之代理模式

Feb 24 Javascript

bootstrap table小案例

Oct 21 Javascript

AngularJS Toaster使用详解

Feb 24 Javascript

解决vue router使用 history 模式刷新后404问题

Jul 19 Javascript

node.js 发布订阅模式的实例

Sep 10 Javascript

BootStrap自定义popover,点击区域隐藏功能的实现

Jan 23 Javascript

vue.js实现格式化时间并每秒更新显示功能示例

Jul 07 Javascript

element-ui table span-method(行合并)的实现代码

Dec 20 Javascript

JavaScript数组去重的几种方法

Apr 07 Javascript

使用react+redux实现计数器功能及遇到问题

Jun 02 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 长文章分页函数带使用方法，不会分割段落,翻页在底部

2009/10/22 PHP

php实现微信公众平台账号自定义菜单类

2014/12/02 PHP

PHP使用PDO抽象层获取查询结果的方法示例

2018/05/10 PHP

JavaScript打字小游戏代码

2011/12/26 Javascript

表单验证的完整应用案例探讨

2013/03/29 Javascript

javascript学习笔记（三）BOM和DOM详解

2014/09/30 Javascript

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

2014/12/16 Javascript

js与jquery回车提交的方法

2015/02/03 Javascript

遍历json 对象的属性并且动态添加属性的实现

2016/12/02 Javascript

JS异步文件分片断点上传的实现思路

2016/12/25 Javascript

微信小程序实现轮播图效果

2017/09/07 Javascript

vue2.0 如何把子组件的数据传给父组件(推荐)

2018/01/15 Javascript

Vue.js 中取得后台原生HTML字符串原样显示问题的解决方法

2018/06/10 Javascript

说说Vuex的getters属性的具体用法

2019/04/15 Javascript

Python入门篇之列表和元组

2014/10/17 Python

在Python中使用PIL模块处理图像的教程

2015/04/29 Python

Python实现MySQL操作的方法小结【安装,连接,增删改查等】

2017/07/12 Python

开源软件包和环境管理系统Anaconda的安装使用

2017/09/04 Python

利用Anaconda简单安装scrapy框架的方法

2018/06/13 Python

Python学习笔记之列表推导式实例分析

2019/08/13 Python

图解python全局变量与局部变量相关知识

2019/11/02 Python

Python3 shelve对象持久存储原理详解

2020/03/23 Python

详解Python中的路径问题

2020/09/02 Python

CSS3教程(6):创建网站多列

2009/04/02 HTML / CSS

html5 音乐播放器 audio 标签使用概述

2013/07/15 HTML / CSS

荷兰在线啤酒店：Beerwulf

2019/08/26 全球购物

就业推荐表自我鉴定范文

2014/03/21 职场文书

团支书竞选演讲稿

2014/04/28 职场文书

初中优秀班集体申报材料

2014/05/01 职场文书

工程售后服务方案

2014/06/08 职场文书

小学优秀班主任材料

2014/12/17 职场文书

反邪教学习心得体会

2016/01/15 职场文书

2016思想纪律作风整顿心得体会

2016/01/23 职场文书

员工工作失职检讨书范文！

2019/07/03 职场文书

使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

2021/06/13 Python

nginx负载功能+nfs服务器功能解析

2022/02/28 Servers