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

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

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

虚心若愚求知若渴
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-drag-dialog.rar
09-03
1.将文件资源放置在directives文件夹下 2.在main.js下引入// 可拖拽自定义命令 import elDragDialog from '@/directives/el-drag-dialog' Vue.use(elDragDialog) 3.在弹窗组件中使用 <el-dialog append-to-body v-el-drag-dialog > </el-dialog>
elementui的dialog遮罩层打开无法关闭
weixin_43263360的博客
11-12 2330
项目场景： 在项目使用elementui的dialog是出现了遮罩层无法关闭的诡异bug 如下图 问题描述： 后来搜索网上的方法再dialog中添加了: modal-append-to-body=‘false’ 内联代码片。 // dialog代码 <el-dialog modal-append-to-body='false' > 结果： 更加诡异，dialog关闭时无法关闭遮罩层 如下图 原因分析： 通过查阅资料得知这是由于我给父元素加了定位元素 // 父元素div内联样式 <
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...
44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
最新发布
970655147的专栏
03-26 1351
通常意义上 主要的问题为 列表的某响应式数据更新着更新着 后面就变成非响应式对象了, 然后 就造成了 数据一直在更新, 但是 视图的渲染后面就未渲染了, 这是一个由于 模型上的问题 导致的数据的不在响应式更新。可以看到 mounted 之后的两个操作是正常的, 最终 tuesday 可以看到增加的晚上的计划, wednesday morning 的事项发生了改变。又或者 是因为使用了相关 vue 未能够检测到的 api 来更新 对象, 数组 的元素, 然后导致的数据的不同步, 数据更新了 但是视图未更新。
el-dialog 组件中 :append-to-body=“true“
qq_25741071的博客
04-14 4094
正在为您搜索：vue项目、element UI框架、el-dialog组件、:append-to-body属性。属性时可能会导致一些 CSS 样式失效或者需要重新定义，因此应该进行测试以确保对话框的正确显示和功能正常。组件受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。在 Vue 项目中使用 Element UI 框架，组件插入到父组件的节点下，而不是直接插入到文档的。但是，如果不使用该属性，而是将其设置为默认值。，以确保对话框的正确显示和功能正常。需要注意的是，在使用。
Dialog、Drawer 点击浏览器回退、前进，遮罩层不消失问题
qq_44130459的博客
11-02 1524
Vue 项目中使用 element-ui, Dialog、Drawer 组件使用时，点击浏览器回退、前进，遮罩层不消失。在 main.js 引入Element 时，给组件添加默认属性。
使用el-dialog遇到的坑——append-to-body
热门推荐
syx_cainiao的博客
11-27 3万+
场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。 我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果
关于element中el-dialog设置append-to-body样式不生效问题
m0_58361435的博客
11-24 1361
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。
vue+Element中append-to-body的使用
weixin_43626529的博客
10-28 5992
我们写项目的时候经常会遇到子组件被父组件覆盖的情况，这个时候在子组件的dialog上 就应该加上append-to-body属性
Element对话框el-dialog几个小属性
文龙刚的博客
06-24 906
Element对话框el-dialog几个小属性
Element的Dialog组件，嵌套的 Dialog的append-to-body属性（append-to-body属性，导致内层弹框样式设置不上）
ddx2019的博客
07-26 2万+
一、问题描述 append-to-body属性，导致内层弹框样式设置不上 二、解决办法， 自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示
react-append-to-body:React高阶组件，使您可以将组件附加到主应用之外的DOM
04-28
React高阶分量附加到主体 高阶组件，使您可以将组件附加到主应用程序之外的DOM。 支持React 16和React 15及以下版本，因此无论有无ReactDOM.createPortal均可使用。 安装 npm i react-append-to-body --save 用 import { componentWillAppendToBody } from "react-append-to-body" ; /* Some component that you want to attach to the DOM */ function MyComponent ( { children } ) { return < div xss=removed> { children } < / div > ; } const AppendedMyComponent =
gulp-append-prepend：简单的Gulp插件即可追加
02-03
gulp-append-prepend 简单的Gulp插件。 用法 首先，将gulp-append-prepend安装为开发依赖项： npm install gulp-append-prepend --save-dev 然后，将其添加到您的gulpfile.js： const gap = require ( 'gulp-append-prepend' ) ; gulp . task ( 'myawesometask' , function ( ) { gulp . src ( 'index.html' ) . pipe ( gap . prependFile (
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
vue3.X+element+cli4.0
05-07
动态路由，自定义命令，promise 封装
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
el-dialog 设置append-to-body有什么坏处
08-31
当设置 el-dialog 的 append-to-body 属性为 true 时，将会把对话框插入到文档的 <body> 元素中，而不是插入到父组件的节点下。这样做的好处是确保对话框在页面中的位置和展示效果与其他元素无关，避免受到父组件的样式和约束的影响。然而，使用 append-to-body 属性可能会带来一些坏处。 首先，当将 el-dialog 插入到文档的 <body> 元素中时，其可能会独立于其他组件，导致样式和布局方面的一些问题。你可能需要重新定义一些 CSS 样式来确保对话框的正常显示和功能正常。 其次，将对话框插入到文档的 <body> 元素中可能会导致遮罩层在最上面挡住其他显示层的问题，特别是在某些浏览器（如IE）中可能更容易出现这个问题。这可能会影响用户操作或者导致一些显示上的不便。 最后，通过使用 append-to-body 属性，对话框可能会被其他定位元素挡住，例如在全屏显示时可能会被页面中的其他元素覆盖（比如 vue-element-admin 左边的菜单和上面的头）。尤其需要注意的是，这个问题通常只在IE浏览器中出现，并且可能只在每次登录进来时才会有，刷新页面可能会解决这个问题。 尽管 append-to-body 属性解决了一些布局和样式方面的问题，但需要注意上述可能会导致的一些坏处。在使用 append-to-body 属性时，建议进行充分测试以确保对话框的正常显示和功能正常。如果你在特定情况下遇到了问题，可以考虑调整或尝试其他的解决方案。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-dialog 组件中 :append-to-body=“true](https://blog.csdn.net/qq_25741071/article/details/130147378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-drag-dialog.rar](https://download.csdn.net/download/duanhy_love/21888813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *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.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值