终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】

最新推荐文章于 2025-03-12 12:26:38 发布
最新推荐文章于 2025-03-12 12:26:38 发布
阅读量1.7w 收藏 28
点赞数 8
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39806100/article/details/120837348
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后说重点，为了避免出现遮罩层在最上面挡住了显示层（可能在谷歌浏览没问题，在IE浏览器就会有这个问题），以及被其他定位元素挡住（显示层全屏的时候）比如vue-element-admin左边的菜单和上面的头）(这个问题只有IE浏览器才会出现，而且是每次登录进来才会有这个问题，刷新一下又好了)。通过加append-to-body属性解决以上所有问题

Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 3833
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 510
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
Vue3中使用el-dialog时设置append-to-body导致:deep修改element-plus的样式无效
u010971793的博客
01-15 436
1.直接添加class重命名（重命名不会影响其他el-dialog）2.进入index.htm修改样式即可。
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal-append-to-body="false"
webZRH的博客
08-14 2万+
<el-dialog :visible.sync="dialogImg" :modal-append-to-body="false"> <img :src="dialogImageUrl" alt=""> </el-dialog> 运用element的Upload 上传组件预览图片会出现遮罩层在弹出层的上面在遮罩处添加:modal-append-to-bo...
el-dialog层级问题
最新发布
qq_44330871的博客
03-12 236
css中控制层级的属性 ：z-index ，在style中设置z-index时出现el-dialog的遮罩层大于dialog的现象，在el-dialog上添加tinymce组件，第二次遇到点击tinymce组件上的插件本应出现下拉菜单但无反应的问题。el-dialog中和层级相关的属性：modal-append-to-body。原因就是el-dialog的层级高于下拉菜单的层级，遮挡住了。解决方法是z-index属性直接写在标签内。元素中，避免样式或层级问题。
关于element抽屉el-drawer被遮罩层覆盖的解决方法
m939499的博客
09-25 1108
情景：在使用多个弹出抽屉时，当打开第一个抽屉，点击某个部分弹出新的抽屉，然后在关闭新的抽屉后，第一个抽屉会被遮罩层整个覆盖，无法点击也无法取消，只能整体刷新窗口才能正常。这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。解决方法就是加上如下2行代码。
前端-Vue嵌套el-dialog遮罩层BUG（页面置灰）
Lee_ann的博客
02-27 601
嵌套dialog，打开第一个dialog的时候，再打开第二个dialog，此时再关闭第二个dialog，屏幕会置灰。，即打开一个dialog的时候，再打开第二个dialog，此时屏幕会置灰。
使用el-dialog遇到的坑——append-to-body
热门推荐
syx_cainiao的博客
11-27 3万+
场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。 我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果
el-dialog 组件中 :append-to-body=“true“
qq_25741071的博客
04-14 7548
正在为您搜索：vue项目、element UI框架、el-dialog组件、:append-to-body属性。属性时可能会导致一些 CSS 样式失效或者需要重新定义，因此应该进行测试以确保对话框的正确显示和功能正常。组件受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。在 Vue 项目中使用 Element UI 框架，组件插入到父组件的节点下，而不是直接插入到文档的。但是，如果不使用该属性，而是将其设置为默认值。，以确保对话框的正确显示和功能正常。需要注意的是，在使用。
44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
970655147的专栏
03-26 2695
通常意义上 主要的问题为 列表的某响应式数据更新着更新着 后面就变成非响应式对象了, 然后 就造成了 数据一直在更新, 但是 视图的渲染后面就未渲染了, 这是一个由于 模型上的问题 导致的数据的不在响应式更新。可以看到 mounted 之后的两个操作是正常的, 最终 tuesday 可以看到增加的晚上的计划, wednesday morning 的事项发生了改变。又或者 是因为使用了相关 vue 未能够检测到的 api 来更新 对象, 数组 的元素, 然后导致的数据的不同步, 数据更新了 但是视图未更新。
el-dialog append-to-body=false时遮罩层无法遮盖父级同级组件
qq_43615959的博客
06-06 720
解决el-dialog append-to-body=false、modal-append-to-body=false时遮罩层无法遮盖父级同级组件的问题
Element的Dialog组件，嵌套的 Dialog的append-to-body属性（append-to-body属性，导致内层弹框样式设置不上）
ddx2019的博客
07-26 2万+
一、问题描述 append-to-body属性，导致内层弹框样式设置不上 二、解决办法， 自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示
vue el-dialog
Yueqin0512的博客
09-22 731
<el-dialog title="Change Passward" :visible.sync="editDialogFormVisible" width="30%" :append-to-body="true" :close-on-click-modal="false"> <el-form ref="changePassward" :model="changePass...
el-dialog 设置append-to-body有什么坏处
08-31
- *3* [终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】](https://blog.csdn.net/weixin_39806100/article/details/120837348)[target="_blank" data-report-click={"spm":"1018.2226....
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭
weixin_41697323的博客
12-03 5236
需求描述 今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。 弹窗关闭后还显示一层遮罩层，设置append-to-body即可 问题分析 之所以会产生这种问题，是因为elementUi在...
el-dialog嵌套遇到的问题
梅花寺
05-25 4955
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
vue+Element中append-to-body的使用
weixin_43626529的博客
10-28 7076
我们写项目的时候经常会遇到子组件被父组件覆盖的情况，这个时候在子组件的dialog上 就应该加上append-to-body属性
关于element中el-dialog设置append-to-body样式不生效问题
m0_58361435的博客
11-24 3151
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。
去除弹窗遮罩层:modal-append-to-body=“false“
Lililiming_的博客
02-20 978
去除弹窗遮罩层:modal-append-to-body="false"
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值