关于element中el-dialog设置append-to-body样式不生效问题

最新推荐文章于 2024-03-26 09:29:39 发布
最新推荐文章于 2024-03-26 09:29:39 发布
阅读量1.5k 收藏 12
点赞数 9
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58361435/article/details/134555327
版权

最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。这里说另一种方法！！！

  1. 在assets目录新建一个dialog.css文件，用来修改嵌套的dialog。 
  2. 然后在组件中给他从新命名一个名字
  3. 在dialog.css中修改样式
  4. ok，这样就修改成功了，注意，不能嵌套，否则不生效哦！！
  5. 然后在用到的vue文件里面引入​​​​​​​

小政爱学习！
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-dialog 组件中 :append-to-body=“true“
qq_25741071的博客
04-14 4294
正在为您搜索：vue项目、element UI框架、el-dialog组件、:append-to-body属性。属性时可能会导致一些 CSS 样式失效或者需要重新定义，因此应该进行测试以确保对话框的正确显示和功能正常。组件受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。在 Vue 项目中使用 Element UI 框架，组件插入到父组件的节点下，而不是直接插入到文档的。但是，如果不使用该属性，而是将其设置为默认值。，以确保对话框的正确显示和功能正常。需要注意的是，在使用。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 elementui-plus el-dialog修改了body样式不生效问题解决方案
weixin_43929063的博客
12-08 1315
这样不会影响到其他区块的样式，也能针对单一模块进行设定，最新的elementui-plus其他方式都没用，已经试过deep 之类。先在el-dialog加modal-class=“topclass”
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
最新发布
970655147的专栏
03-26 1460
通常意义上 主要的问题为 列表的某响应式数据更新着更新着 后面就变成非响应式对象了, 然后 就造成了 数据一直在更新, 但是 视图的渲染后面就未渲染了, 这是一个由于 模型上的问题 导致的数据的不在响应式更新。可以看到 mounted 之后的两个操作是正常的, 最终 tuesday 可以看到增加的晚上的计划, wednesday morning 的事项发生了改变。又或者 是因为使用了相关 vue 未能够检测到的 api 来更新 对象, 数组 的元素, 然后导致的数据的不同步, 数据更新了 但是视图未更新。
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 > 例子
element-ui中dialog弹窗关闭按钮失效的解决
01-18
如下所示： <el title=修改库存 visible.sync=kcDialog close=kcDialog> ... </el> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js index.html <script src=https://code.jquery.com/jquery-3.1.0.js integrity=sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=
使用el-dialog遇到的坑——append-to-body
热门推荐
syx_cainiao的博客
11-27 3万+
场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。 我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果
终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】
灰的博客
10-18 1万+
最后说重点，为了避免出现遮罩层在最上面挡住了显示层（可能在谷歌浏览没问题，在IE浏览器就会有这个问题），以及被其他定位元素挡住（显示层全屏的时候）比如vue-element-admin左边的菜单和上面的头）(这个问题只有IE浏览器才会出现，而且是每次登录进来才会有这个问题，刷新一下又好了)。通过加append-to-body属性解决以上所有问题 ...
elementui弹窗Dialog添加append-to-body后修改原样式无效
m0_54570434的博客
06-07 1070
1.文档提供了 这属性。
element-ui的el-dialog组件内容在阴影下面
Xue_BT的博客
03-15 2242
只需在 el-dialog 标签上添加上以下代码即可 :append-to-body="true"
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui遮罩层el-dialog的使用
Supaopao的博客
03-11 2284
原文地址：https://www.cnblogs.com/fqh123/p/11183096.html template <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible...
VUE宝典之el-dialog使用
Kuangtian的博客
12-09 3991
el-dialog是Element UI库中的一个重要组件，用于在Vue应用程序中创建弹出框。它提供了一组实用的属性和事件，让我们能够轻松地实现各种弹出框功能。
el-dialog 遮罩层覆盖内容的问题
weixin_53474595的博客
02-16 409
做项目的时候用了el-dialog,发现弹窗内容也被遮罩层给覆盖了，用z-index设置也没有用。解决方法：:append-to-body="true"，加上这个终于可以了。
el-dialog嵌套使用
qq_44860613的博客
10-15 8768
最近使用vue+elementUI做项目，使用过程中很多地方会用到dialog这个组件，有好几个地方用到了dialog的嵌套，刚开始使用不是很熟练，也是走了很多小弯路，现在总结一下自己使用的一些小问题。 1.dialog嵌套时， ...
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8096
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
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 ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值