element在dialog中再调用dialog，整个屏幕被遮住了

最新推荐文章于 2024-05-16 15:53:28 发布
最新推荐文章于 2024-05-16 15:53:28 发布
阅读量746 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44896595/article/details/108342631
版权

这个图片列表被我做成组件后，如图，我在其他地方调用是正常的

[图片]

当我在

[图片]

dialog中调用时，组件内的dialog被遮住了

【解决】在组件中的dialog上加一个append-to-body，重组层级关系

z二七
关注
专栏目录
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8438
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1673
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
解决element-plus的Dialog对话框的遮罩层无法全屏遮罩
最新发布
m0_74545388的博客
05-16 440
最近在使用element-plus中的Dialog对话框的时候,我放在el-card中,造成了打开对话框的遮罩层无法全屏显示,在github上找很多解决方法,最后在看官方文档的时候,官方有这一个属性。这个属性加到el-dialog上即可,然后就可以实现遮罩层全屏遮罩。
element的嵌套dialog，在打开第二个dialog的时候会被遮罩层遮住
斑斓 小星愿的博客
01-09 9175
element嵌套dialog遮罩层的问题 做项目的时候遇到一个问题，在一个弹出层的内容区做处理打开另一个弹出层时，第二个弹出层会被遮罩层遮住，点击五次之后遮罩层关闭。 然后才发现，element 的dialog嵌套问题，之所以第二次弹出的会被遮住，是因为没有给定 append-to-body。 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它...
Element-UI中el-dialog打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
2301_76707317的博客
09-27 285
根据官网文档可知，在弹框中添加如下代码即可解决。
el-dialog点击遮罩层不关闭弹窗
lighting0_0的博客
11-22 3656
原文链接： https://blog.csdn.net/qq_44711316/article/details/120968545?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20dialog%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E4%B8%8D%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97%20%E5%B1%80%E9%83%A8%
iframe弹出框遮罩父类页面
08-22
在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
多国语言版本的编码要点
jenus1的专栏
02-28 2470
◆本地化产品的整体步骤1．在产品起始开发文档中要明确说明，产品本地化是开发周期中的一个重要环节，不应该把本地化放到开发完成时做，这样会带来本地化居多不便；2．本地化测试应该在产品功能稳定时立即启动， 这时候无需开发一个本地化版本，而通过伪本地化方面或Pilot-language 本地化方法来先行测试；3. 在用户界面稳定后，其他版本的本地化工作需要马上启动；4．在原始资源中避免表达
前端速成教程（HTML、CSS、JS、Vue…）
www.h y p e r p l a s m a.top
05-06 3368
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
Activity与Fragment易混点归纳
开心阳
05-19 1万+
Android开发中Activity和Fragment是非常重要的两个知识点，这里我们就分别归纳一下，在使用Activity和Fragment时需要注意的一些事项，特别是对于Fragment，在对其进行管理时我们要选择好的一些方式。 一、Activity要点 Activity负责展示UI给用户，负责和用户的交互操作。本部分主要对Activity的生命周期、如何保存状态信息、如何讲一个A
在el-dialog中进行Vue的路由跳转，跳转后出现遮罩层？
不知名人士的博客
09-26 5884
某个需求需要在路由 /systemSettle/Application 的一个页面中的对话框中进行路由跳转，至另一个页面下，如图所示（涉及公司内部业务，已部分打码）： 点击跳转之后，跳转至路由 /systemSettle/payways 下的页面。如图所示： 但是此时发现页面被一整个遮罩层遮住了，页面中的内容都无法点击，这是什么情况???? 打开控制台，如图所示： 果然有个遮罩层，这是哪里来的呢？原来我以为是项目中封装的，但是搜索了一下并没有这个东西。于是去ElmentUI的官网找一下el-dialo
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
qq_41451744的博客
08-27 1911
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
zhichaogong的博客
06-15 9110
关于element-ui弹窗组件el-dialog，阻止点击遮罩层关闭的问题，以及全局处理和局部处理的方法 前言 在使用element-ui的组件时，有时候根据项目需求，需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据，由于表单数据比较多，有时候误触了el-dialog的遮罩层就关闭弹窗了，导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。 下面针对使用npm安装使用element-ui 1. 全局配置 npm引入，直接在main.js文件中写入如下
vue dialog里面再加dialog 导致页面被遮挡
yyyyyysssssshhhhhh的博客
01-08 1037
在里面一个el-dialog 加上append-to-body <el-dialog append-to-body></el-dialog>
vue-element-dialog 内外两层dialog 内层dialog第二次打开显示不正常的问题
R_DarkNight的博客
09-21 2512
问题描述 : Q1:外层dialog 打开内层dialog ,第一次打开内层正常,第二次打开内层失效,关闭外层dialog才显示内层dialog. Q2:外层dialog打开内层dialog,第二次打开遮障出错. 问题原因 A1:没有加modal-append-to-body 跟append-to-body属性. A2:内层dialog没有真正关闭 解决方法 1.父(外)层 dialog加 :modal-append-to-body="false" 子(内)层dialog...
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 924
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
m0_65274248的博客
10-09 8395
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
element ui的el-dialog点击关闭的问题
热门推荐
Beam
04-30 1万+
el-dialog属性 close-on-click-modal，是否可以通过点击 modal 关闭 Dialog，默认为true。 现象 正常设置后，有时点击没有关闭对话框，而是先亮了，然后再次点击才成功关闭对话框。 原因 弹出对话框后发现，el-dialog__wrapper被设置了margin-top，导致上面部分没有dialog遮罩。 因此，点击上半部分会出现，先亮屏幕再次点击才能关闭，点...
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭。
qq_34169240的博客
11-21 4168
今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。
Element UI：Dialog对话框详解与示例
"Element Dialog对话框的使用示例，展示了如何在Vue应用中利用Element UI库创建和定制对话框组件，包括基本用法和自定义内容的实现。" Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一系列丰富、美观的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值