elementUI同一页面展示多个Dialog的实现
更新时间：2020年11月19日 10:40:39 作者：rirmk
这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
要实现的效果如下：
首先官方文档是这样描述的：
但是我写了个小demo发现并不能直接平级放置即可，一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。
原因如下：因为dialog先后顺序不同z-index设置的层级不同，所以必定会覆盖遮挡
那么我们要实现一个这样的效果不仅仅平级放置即可，就要用到里面的一个属性：modal
下面贴上代码：
总的思路就是：dialog先后顺序重叠问题，使用便宜去让它们错开；然后就是遮罩层导致不能点击z-index层级低的弹框，就要用到modal去关闭z-index层级高的遮罩层。（还可以额外使用close-on-click-modal来取消通过点击 modal 关闭 Dialog）
到此这篇关于elementUI同一页面展示多个Dialog的实现的文章就介绍到这了,更多相关elementUI多Dialog内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuex处理用户Token过期及优化设置封装本地存储操作模块
这篇文章主要为大家介绍了Vuex处理用户Token优化设置封装本地存储操作模块及Token 过期问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了tdesign vue初始化组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue{{}}拼接字符串和换行符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要为大家介绍了vue页面渲染数组中数据文案后添加逗号最后不加逗号示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,这篇文章主要介绍了nvue页面用法uniapp,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue.js中v-for使用及索引获取,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法
今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了vue + qiankun 项目搭建,首先是通过cli3构建vue2项目，通过qiankun改造主应用，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue开发移动端使用better-scroll时click事件失效的解决方案
这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
本篇文章主要介绍了vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论