Element-ui中el-dialog组件显示时有蒙层（遮罩层）

最新推荐文章于 2024-08-16 17:35:10 发布

Kimser

最新推荐文章于 2024-08-16 17:35:10 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/Kimser/article/details/107181112

版权

给el-dialog标签添加属性append-to-body即可破解！


          <el-dialog
            :visible.sync="dialogVisible"
            append-to-body
          >
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

亲测有效！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kimser

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

m0_38109616的博客

12-01

1947

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

Vue+ElementUI中 el-dialog弹框蒙层问题

xiaoxiaofly的博客

02-10

1631

开发项目时页面中用到了2个弹框（或者是dialog中再嵌套dialog），会出现2个灰色蒙版层叠加，需要再点一下蒙层才会消失。用一个属性解决 :append-to-body="true"

参与评论您还未登录，请先登录后发表或查看评论

el-dialog有一层蒙层的解决办法

weixin_42447659的博客

11-12

1474

点开按钮又一个蒙层再次点击才消失，如图在标签上加一句:modal-append-to-body='false’就完事了

基于ruoyi(若依)实现下载文件时遮罩层显示百分比进度

最新发布

qq_38281043的博客

08-16

521

基于ruoyi实现下载文件时遮罩层显示百分比进度

点开 el-dialog 时有一层蒙层的解决办法

qq_34319049的博客

06-24

2875

点开el-dialog 屏幕好像罩着一层蒙层，就像看着很不爽，怎么办呢？ <el-dialog title="" :modal-append-to-body='false'> </el-dialog> 就是这么简单，在标签上加一句:modal-append-to-body='false'就完事了，完事了，事了，了。 ...

elementUI 过渡动画蒙层效果

朝花夕拾的博客

04-27

4666

elementUi 元素淡入的方式有两种： 1.el-fade-in-linear 2.el-fade-in 使用方法：在要使用该淡入效果的标签外层嵌套<transition>标签，并添加name属性，属性值为el-fade-in-linear 或 el-fade-in 例如蒙层效果 <transition name="el-fade-in"> &l...

element-ui 的Dialog被蒙板遮住原因及解决办法

weixin_34239592的博客

07-06

1661

用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。解决办法很简单，查看 element 的官方文档在 el-dialog 标签里添加下面两行代码的...

【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？

椰卤工程师的个人博客

07-06

3943

到底是什么问题？没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto

element-ui中dialog弹窗关闭按钮失效的解决

10-14

在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...

Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭

金蕊泛流霞

09-26

3968

我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。

ElementUI中使用对话框Dialog时打开时出现了遮罩层问题解决方案

MonkeyBananas的博客

09-24

734

<el-button :append-to-body="true"> ... </el-button>

解决vue和el-dialog的遮罩层消失

子非渔

11-04

5254

解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body=‘false’ 错误分析 1）若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了position:...

解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

m0_45272038的博客

08-03

2072

后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；

el-dialog弹框出现遮罩层,去掉的办法

weixin_50216073的博客

03-14

1651

el-dialog弹框出现遮罩层,用它自带属性 modal-append-to-body。如果出现多个遮罩层,使用append-to-body。

鼠标移入移出给图片加蒙层

weixin_44770377的博客

04-30

771

可用a标签实现，鼠标移入图片，添加蒙层在img里写一个a标签，里面放蒙层div ，class=“mask” 重点是要对图片img设置position: relative;作为蒙层的定位父级原始。蒙层 .mask设置定位和背景透明度： position: absolute; top: 0; left: 0;background: rgba(0, 0, 0, 0.5); ...

vue项目中element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法

sjp991012的博客

11-21

1083

【代码】element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法。

基于vue3.0的遮罩

weixin_41897680的博客

09-28

2523

前言最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现遮罩备注组件名不要命名为mask，控制台会提示Do not use built-in or reserved HTML elements as component id，意思是不要将内置或保留的HTML元素用作组件id 效果添加了一个close-on-click-modal属性，默认点击遮罩，遮罩

el-dialog出现在下层(遮罩下)解决

Super_hzj的博客

03-14

2259

el-dialog出现在遮罩层下

Element-UI封装el-dialog组件教程：解决prop修改冲突

"在使用Element UI库构建前端项目时，将弹窗组件如`el-dialog`进行封装是提高代码复用性和灵活性的重要实践。本文档主要介绍了如何将`el-dialog`封装为一个可自定义的Vue组件，以便在需要时方便地管理弹窗状态和内容...