element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在

最新推荐文章于 2024-04-06 10:05:01 发布
最新推荐文章于 2024-04-06 10:05:01 发布
阅读量2.8k 收藏 1
点赞数 1
文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxuan89814/article/details/129671775
版权

代码中使用了dialog，dialog中点击某个按钮，又嵌套了一个dialog。

导致最外层的dialog出现后一直被遮罩层遮住，点击确定关掉dialog遮罩层还在。

element-ui的dialog组件有这几个参数：

 其中，append-to-body 嵌套的dialog必须指定为true

    <el-dialog :visible.sync="item.track_check.logcheck" :append-to-body="true"
 title="log查看">

加上后，遮罩层不再遮挡上层

 

小小鱼er
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-element-dialog-drag:支持ElementUI对话框拖动
04-28
Vue元素对话框拖动 支持ElementUI对话框拖动 用法 npm install vue - element - dialog - draggable -- save import DlgDraggable from "vue-element-dialog-draggable" Vue . use ( DlgDraggable , { containment : true //Constrains dragging to within the bounds of the window. Default: false. } ) ; < el xss=removed> //.... < / el-dialog > 例子
Vue + Element-ui Dialog组件可多拽
10-25
Vue自定义指令实现Vue + Element-ui Dialog组件可多拽
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementui弹窗里面出弹窗有一层遮罩问题
最新发布
m0_47177307的博客
04-06 347
当在 Element UI 的弹窗组件中打开另一个弹窗时，可能会出现多层遮罩的问题。这可能导致用户界面不友好，并且影响用户体验。
elementui dialog关闭遮罩还在---已解决
沙漏的前端笔记
04-18 5543
element UI dailog关闭但是遮罩未关闭---已解决
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 }, 以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue+elementui的this.$loading遮罩使用
小张的博客
05-04 4161
vue+elementui中的遮罩使用
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
热门推荐
肖肖肖丽珠的博客
04-01 1万+
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框 这时我们发现这个解析的框被外面一个遮罩层挡住了。 我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。 首先查看官网的element-ui的el-dialog的一些属性 首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 982
关于el-dialog上额外多了一层遮罩层
elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
weixin_61397543的博客
11-09 1035
【代码】elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
element-ui嵌套弹框遮罩层解决
骨子里的偏爱
03-09 714
element-ui嵌套弹框遮罩层解决
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui css非网络引用，
07-26
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> <el-button @click=...
父页面显示遮罩层弹出半透明状态的dialog
09-04
本文为大家介绍下父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面,需要的朋友可以参考下
遮罩层弹出半透明dialog
02-27
遮罩层弹出半透明dialog,很fashion。
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
v-dialog-drag: Dialog 组件拖拽任意位置 v-dialog-drag-width: Dialog 组件拖拽宽度 v-dialog-corner: Dialog 组件右下角拖拽宽度高度 v-clipboard: 剪切板指令，类似 复制、Ctrl + C等复制文本至剪切板 提供原型...
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 1945
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8098
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法
super码力的博客
06-06 3650
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法，可以使用官方文档里面提供了一个append-to-body的属性解决
element-ui Dialog 遮罩层相互影响
08-26
你好！关于Element UI Dialog遮罩层相互影响的问题，我可以给你一些解决方案。首先，Element UI Dialog组件默认会创建一个遮罩层来阻止用户与页面上其他元素进行交互。如果同时打开多个Dialog组件，它们之间确实可能会出现遮罩层相互影响的问题。 一种解决方法是手动控制Dialog组件的遮罩层。你可以使用`append-to-body`属性将Dialog组件的遮罩层添加到body元素上，而不是父级元素。这样做可以确保每个Dialog组件有自己独立的遮罩层，互相之间不会产生影响。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" append-to-body> <!-- 对话框内容 --> </el-dialog> ``` 另一种解决方法是使用`z-index`属性手动设置每个遮罩层的层级。你可以为每个Dialog组件设置不同的`z-index`值，确保它们在层级上互不重叠。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" :z-index="100"> <!-- 对话框内容 --> </el-dialog> ``` 你可以根据具体情况选择适合的解决方案来解决Element UI Dialog遮罩层相互影响的问题。希望对你有所帮助！如果你有任何其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值