el-dialog 组件中 :append-to-body=“true“

已于 2023-04-14 10:18:53 修改
阅读量7.5k 收藏 6
点赞数 2
文章标签： vue.js 前端 javascript
于 2023-04-14 10:17:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25741071/article/details/130147378
版权

正在为您搜索：vue项目、element UI框架、el-dialog组件、:append-to-body属性

在 Vue 项目中使用 Element UI 框架，el-dialog 组件中的 :append-to-body="true" 属性仍然表示将对话框插入到文档的 <body> 元素中。其作用与之前回答中描述的一致。

但是，如果不使用该属性，而是将其设置为默认值 false，则会将 el-dialog 组件插入到父组件的节点下，而不是直接插入到文档的 <body> 元素下。这意味着 el-dialog 组件受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。

因此，建议在使用 el-dialog 组件时将其 :append-to-body 属性设置为 true，以确保对话框的正确显示和功能正常。

需要注意的是，在使用:append-to-body="true" 属性时可能会导致一些 CSS 样式失效或者需要重新定义，因此应该进行测试以确保对话框的正确显示和功能正常。

Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 509
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 3831
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组件
44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
970655147的专栏
03-26 2695
通常意义上 主要的问题为 列表的某响应式数据更新着更新着 后面就变成非响应式对象了, 然后 就造成了 数据一直在更新, 但是 视图的渲染后面就未渲染了, 这是一个由于 模型上的问题 导致的数据的不在响应式更新。可以看到 mounted 之后的两个操作是正常的, 最终 tuesday 可以看到增加的晚上的计划, wednesday morning 的事项发生了改变。又或者 是因为使用了相关 vue 未能够检测到的 api 来更新 对象, 数组 的元素, 然后导致的数据的不同步, 数据更新了 但是视图未更新。
Vue 2 探秘：visible 和 append-to-body 是谁的小秘密？
最新发布
小丁的博客
03-25 1196
打开: boolean@Propvisible是子组件用 TypeScript 的@Prop装饰器定义的一个 prop，默认值是false。作用：接收父组件传来的值（fclVis），然后绑定到的:visible。属性类型Boolean默认值false作用：决定对话框 DOM 是否追加到<body>。子组件的是给用的，但父组件的呢？因为没被子组件接收，它只是个“空气传值”，啥也没干。😂用 Mermaid 画个思维导图，理清关系：fill:#333;color:#333;color:#333;
使用el-dialog遇到的坑——append-to-body
热门推荐
syx_cainiao的博客
11-27 3万+
场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。 我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果
Element的Dialog组件，嵌套的 Dialog的append-to-body属性（append-to-body属性，导致内层弹框样式设置不上）
ddx2019的博客
07-26 2万+
一、问题描述 append-to-body属性，导致内层弹框样式设置不上 二、解决办法， 自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示
关于element中el-dialog设置append-to-body样式不生效问题
m0_58361435的博客
11-24 3151
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。
【bug】vue-treeselect在el-form表单中可以正常显示，在el-table中显示的是空的，添加 :append-to-body=“true“可解决
花椒和蕊的博客
05-11 393
加这个 :append-to-body="true"就可以了，应该是样式影响的原因，组件添加 :append-to-body=“true” 属性时，这个属性会让组件的挂载点变为文档的 元素，而不是它所在的父级元素，可以避免被遮挡，脱离原始的文档流。基本上就是一样的代码，但是在列表中就不显示。
<el-dialog ref="hussar_40Ref" @opened="hussar_40OpenedDialog" :visible.sync="hussar_40Show" :show-close="hussar_40ShowClose" :modal="hussar_40IsModal" :modal-append-to-body=true :append-to-body=true :close-on-click-modal="hussar_40IsClickClose" top="0" :class="{'BbcxSjccb_hussar_40': true, 'lcdp_axe':true, 'jxd_additional': true, 'BbcxSjccb': true}" class="hussar_40 jxd_ins_elDialog default">
07-20
- :append-to-body: true，将el-dialog组件附加到body元素上。 - :close-on-click-modal: "hussar_40IsClickClose"，控制点击模态框是否关闭el-dialog。 - top: "0"，设置el-dialog组件的顶部偏移值。 - :class="{'...
element ui 对话框el-dialog关闭事件详解
08-27
- `append-to-body`: 是否将对话框附加到 body 元素上，有时候为了避免层级问题，可能需要将对话框移出当前组件的 DOM 结构。 - `destroy-on-close`: 关闭时是否销毁 Dialog 内部的组件，有时候为了性能考虑，可以...
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 3987
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】
灰的博客
10-18 1万+
最后说重点，为了避免出现遮罩层在最上面挡住了显示层（可能在谷歌浏览没问题，在IE浏览器就会有这个问题），以及被其他定位元素挡住（显示层全屏的时候）比如vue-element-admin左边的菜单和上面的头）(这个问题只有IE浏览器才会出现，而且是每次登录进来才会有这个问题，刷新一下又好了)。通过加append-to-body属性解决以上所有问题 ...
el-dialog append-to-body=false时遮罩层无法遮盖父级同级组件
qq_43615959的博客
06-06 720
解决el-dialog append-to-body=false、modal-append-to-body=false时遮罩层无法遮盖父级同级组件的问题
解决办法：Element UI中el-dialog双层嵌套问题，遮罩显示异常处理
lh_seckill的博客
11-26 3995
1.给被嵌套的dialog增加custom-class属性 和append-to-body属性 <el-dialog custom-class="el-dialog-s" append-to-body :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> 2.自定义样式，覆盖追加append-to-bod...
和el-dialog同级的列表被push数据后for循环渲染失效，列表不更新
weixin_45714898的博客
09-08 727
和el-dialog同级的列表被push数据后for循环渲染失效，列表不更新
el-dialog嵌套,修改内层el-dialog样式(自定义样式)
song_song0927的博客
08-11 5217
el-dialog嵌套el-dialog使用,自定义内层el-dialog样式,修改el-dialog样式
elementui弹窗Dialog添加append-to-body后修改原样式无效
qq_44308109的博客
03-08 1万+
1. 为什么要添加append-to-body属性 在写弹框嵌套时我们需要添加append-to-body属性，否则后弹出的框就会有遮盖层遮挡，如下图 2.为什么会修改无效 我们想改变某个弹窗的原来样式，通常是在该弹框外包一个div，然后修改该div下的dialog样式，但是添加append-to-body属性为true后，Dialog 将插入 body 元素上，也就是说它并不在该div元素之下了，因此修改无效。 3.添加了append-to-body属性的dialog样式修改方式 在dilog组件上定义c
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8733
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
vue3的element-plus的el-dialog的样式加上scoped发现:deep()不再生效解决方案
weixin_50216073的博客
06-06 6395
想要将 弹框 el-dialog__header .el-dialog__body 的padding值设为0,但是。解决方案: 弹框加上 自定义类名 custom-class。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@阿猫阿狗~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值