el-dialog嵌套遇到的问题

最新推荐文章于 2024-07-25 11:05:20 发布
最新推荐文章于 2024-07-25 11:05:20 发布
阅读量4.7k 收藏 8
点赞数 3
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android062005/article/details/124964755
版权

前言

最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。

el-dialog嵌套

我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮

如下图

image.png

但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。

image.png

然后我去查看文档，查看页面dom结构就知道大致原因了。

这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区域的z-index也是动态生成，默认是2001，它们的定位都是fixed,但是内容区域的z-index会比蒙层的大1，导致内容区域可以高亮。

然后你嵌套的dialog显示后，它的蒙层也是替换第一个dialog的蒙层，同样插入到body，然后它的z-index会递增，是2002ÿ

最低0.47元/天 解锁文章
梅花十三儿
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端在el-dialog中嵌套多个el-dialog
m0_50298323的博客
10-24 2414
前端在el-dialog中嵌套多个el-dialog
element-ui框架的el-dialog弹出框被遮罩层挡住了
新技术革命
04-11 2694
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层di...
el-dialog嵌套el-dialog问题
负数
10-28 3813
⼀定要⽗级 el-dialog :modal-append-to-body=“false” ⼦级 el-dialog 同时加上 :append-to-body=“true” 含义： modal-append-to-body 遮罩层是否插⼊⾄ body 元素上，若为 false，则遮罩层会插⼊⾄ Dialog的⽗元素上 append-to-body Dialog ⾃身是否插⼊⾄ body 元素上。嵌套的 Dialog 必须指定定该属性并赋值为true ...
el-dialog append-to-body=false时遮罩层无法遮盖父级同级组件
qq_43615959的博客
06-06 433
解决el-dialog append-to-body=false、modal-append-to-body=false时遮罩层无法遮盖父级同级组件的问题
ElementUI 对话框el-dialog嵌套问题
weixin_44700621的博客
03-09 4709
ElementUI对话框组件嵌套显示出现父组件无法正常显示和子组件无法正常关闭问题解决方法
el-dialog嵌套使用
qq_44860613的博客
10-15 9062
最近使用vue+elementUI做项目，使用过程中很多地方会用到dialog这个组件，有好几个地方用到了dialog的嵌套，刚开始使用不是很熟练，也是走了很多小弯路，现在总结一下自己使用的一些小问题。 1.dialog嵌套时， ...
el-dialog嵌套使用，只显示遮罩层的问题
weixin_44295184的博客
01-16 670
el-dialog嵌套使用，只显示遮罩层的问题
el-dialog嵌套问题解决
大大大大冬瓜
11-04 1219
两个el-dialog嵌套只需要在子组件上加 :modal-append-to-body='false' :append-to-body='true' 即可。。。。
el-dialog被el-dialog覆盖 层级问题
半兽先生的博客
01-19 528
加上append-to-body。
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
博哥的二进制世界
10-26 5439
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
弹窗，最小化和最大化
11-22
本文将深入探讨这些概念，并基于"dialog"标签来解析其实现方法。 首先，"弹窗"是一种在用户交互时突然出现的小窗口，通常用于显示通知、询问或者提供额外的操作选项。在Web开发中，弹窗常用于创建模态对话框，阻止...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
自定义Dialog中播放视频
08-30
在Android开发中，有时我们需要创建个性化的用户交互体验，例如在一个自定义的Dialog中播放视频。这个场景下，我们可以利用SurfaceView来实现视频播放，并且赋予它一些基本的控制功能，比如播放、暂停、显示进度条...
Element Dialog对话框的使用示例
10-15
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <!-- 表格列...
vue+elementui 实现transfer组件，对里面增加一点功能，修改一些问题
12-27
对原先的功能做了一些改进，以及增加一点额外需求功能
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 339
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 411
vue3——利用自定义指令实现下拉框分页懒加载
unplugin-vue-components 的作用是什么
最新发布
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 300
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
el-dialog嵌套dialog时层级问题
08-25
el-dialog嵌套dialog时层级问题是指在使用element-ui的el-dialog组件时，当在一个dialog中再次嵌套一个dialog时，内层dialog可能会被外层dialog或遮罩层所遮挡。在官方的解释中，他们提到了两种解决方法。 第一种方法是将内层dialog的插入位置改为body上而不是插入到外层dialog中，并且确保内层dialog的层级比遮罩层高，这样就能避免被遮挡的问题。 而第二种方法是将内层dialog与外层dialog同级显示，这样也可以避免被遮挡的问题，并且对整体的影响更小。 如果想要查看内层dialog和遮罩层的层级情况，可以打开控制台，通过查看它们在DOM中的位置来确定它们的层级关系。 总结起来，解决el-dialog嵌套dialog时层级问题的方法有两种：一是将内层dialog插入到body上并设置合适的层级，二是将内层dialog与外层dialog同级显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [el-dialog嵌套的影响、原因及解决方法](https://blog.csdn.net/weixin_42322454/article/details/117418976)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值