el-popup-parent--hidden 弹框bug问题

最新推荐文章于 2025-02-17 16:21:20 发布
原创 最新推荐文章于 2025-02-17 16:21:20 发布 · 4.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug #css #前端 #vue #elementui

本文介绍了如何通过CSS解决弹窗显示时body的padding-right问题，确保弹窗打开时向右偏移5px，关闭时回归原位。关键在于为body添加padding-right: 0px !important; overflow: hidden !important;样式，并注意el-popup-parent--hidden类的设置。此解决方案适用于全局样式或app.vue页面中。

问题：点击弹框body添加个class：el-popup-parent--hidden并赋予样式padding-right: 5px;

结果：打开弹狂 盒子向右自动5px，关闭弹窗 盒子向左回归原来位置；

解决：在app.vue页面 或者全局的样式里面 给body样式添加

padding-right: 0px !important;

overflow: hidden !important;

注：给el-popup-parent--hidden设置padding-right: 0px !important;overflow: hidden !important 无效 必须要给body设置样式

vue2.0 - layout组件（五）SideBar和Main页面布局
sqLeiQ的博客
06-16 2239
vue2.0 Layout组件
超详细！！！electron-vite-vue开发桌面应用之layout布局（九）
qq_43206280的博客
08-15 544
设置完基本的路由之后，接下来就可以进行常规的layout页面布局改造了。
el-dialog 弹窗弹出，导致两个滚动条，影响用户体验
weixin_39418338的博客
06-21 6573
el-dialog 弹窗弹出，导致两个滚动条，影响用户体验
常见elment-plus样式问题解决
lingwuxula的博客
08-22 393
处理 ElMessageBox遮罩弹窗出现width: calc(100% - 19px)处理。处理input框增加clearable造成的异常宽度处理。
解决Element UI的el-dialog弹窗打开时css的显示BUG
GhostUncledrew-blogs
04-08 819
*在使用el-dialog弹窗时 body的内联样式默认会有padding-right: 5px <style lang="less" scoped> // .el-popup-parent--hiddren body{ padding-right: 0 !important; } </style>
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
m0_52611940的博客
02-17 586
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
element el-dialog 引发的问题
CodeBoyDong的博客
03-29 3748
elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法，我用的是第二种方法。1. 重写el-popup-parent--hidden的样式。
el-dialog框点击叉号关闭，点了，弹框去了左侧，再点击一次才能关闭
最新发布
12-05
document.body.classList.remove('el-popup-parent--hidden'); document.body.style.overflow = 'auto'; } } } ``` #### 方案二：优化关闭动画 ```html <el-dialog :visible.sync="dialogVisible" :before-...
<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> </transition> </section> </template> <script> export default { name: 'AppMain', computed: { cachedViews() { console.log('this.$store.state.tagsView', this.$store.state.tagsView) return this.$store.state.tagsView.cachedViews; }, key() { console.log('this.$route.path', this.$route) return this.$route.path; } } }; </script> <style lang="scss" scoped> .app-main { /* 50= navbar 50 */ min-height: calc(100vh - 50px); width: 100%; position: relative; overflow: hidden; } .fixed-header+.app-main { padding-top: 50px; } .hasTagsView { .app-main { /* 84 = navbar + tags-view = 50 + 34 */ min-height: calc(100vh - 84px); } .fixed-header+.app-main { padding-top: 84px; } } </style> <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { padding-right: 17px; } } </style> 这是appmain的代码
12-03
- 缺乏错误处理：如果路由配置出现问题，或者对应的组件加载失败，`<router-view>`可能会显示空白，没有给用户任何提示。可以通过`errorCaptured`钩子来捕获并处理这些错误。 - 没有加载状态：当路由对应的组件是...
使用vue3+vite+ts+element若依的项目功能，写一个界面，比如我一个table，有两条数据，id是：innerNo：A1和A2，对他们都点击修改，根据路由配置，应该生成两个修改的界面和原本的index.vue界面，A1的修改界面和index和A2的修改界面与index要能相互切换，两个修改界面也要能相互切换，把相关代码和路由等配置都生成一下，使用代码块生成 需要适配我的appMain.vue代码： <template> <section class="app-main"> <router-view v-slot="{ Component, route }"> <transition v-if="!route.meta.noCache" :enter-active-class="animate" mode="out-in"> <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews"> <component :is="Component" v-if="!route.meta.link" :key="route.fullPath" /> </keep-alive> </transition> <transition v-if="route.meta.noCache" :enter-active-class="animate" mode="out-in"> <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.fullPath" /> </transition> </router-view> <iframe-toggle /> </section> </template> <script setup name="AppMain" lang="ts"> import { useSettingsStore } from '@/store/modules/settings'; import { useTagsViewStore } from '@/store/modules/tagsView'; import IframeToggle from './IframeToggle/index.vue'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; const route = useRoute(); const tagsViewStore = useTagsViewStore(); // 随机动画集合 const animate = ref<string>(''); const animationEnable = ref(useSettingsStore().animationEnable); watch( () => useSettingsStore().animationEnable, (val: boolean) => { animationEnable.value = val; if (val) { animate.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string; } else { animate.value = proxy?.animate.defaultAnimate as string; } }, { immediate: true } ); watch( () => route.fullPath, (val: any) => { console.log('route.fullPath:'+route.fullPath); }, { immediate: true } ); watch( () => route.path, (val: any) => { console.log('route.path:'+route.path); }, { immediate: true } ); onMounted(() => { addIframe() }) watchEffect((route) => { addIframe() }) function addIframe() { if (route.meta.link) { useTagsViewStore().addIframeView(route) } } </script> <style lang="scss" scoped> .app-main { /* 50= navbar 50 */ min-height: calc(100vh - 50px); width: 100%; position: relative; overflow: hidden; } .fixed-header + .app-main { padding-top: 50px; } .hasTagsView { .app-main { /* 84 = navbar + tags-view = 50 + 34 */ min-height: calc(100vh - 84px); } .fixed-header + .app-main { padding-top: 84px; } } </style> <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { padding-right: 6px; } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background-color: #f1f1f1; } ::-webkit-scrollbar-thumb { background-color: #c0c0c0; border-radius: 3px; } </style>
11-26
但是，问题要求生成两个修改界面，但我们可以用一个动态组件来避免重复。不过，如果业务逻辑差异大，也可以分开写，但这里innerNo不同，但修改界面结构相同，只是数据不同，所以用一个编辑组件即可。 然而，题目...
elementPlus关闭弹窗，页面原先滚动条消失
Stephy_Yy
03-09 1083
一开始以为是弹窗内容超过一屏引起，改为一屏内也不能解决。 打开控制台，发现弹窗后自动给body标签加上了类el-popup-parent–hidden，关闭后也没去除，因此手动删除该类。 document.getElementsByTagName('body')[0].className = ''; ...
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 4642
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
el-dialog修改默认内边距el-dialog__body解决方案
简单点的博客
11-16 2509
el-dialog修改默认内边距el-dialog__body解决方案
element-UI打开 dialog 抖动
Ton555555的博客
07-26 901
抖动原因： 1. body 多了一个class 属性el-popup-parent-hidden， 加上了padding-right：15px; 2.打开dialog 时， 通过右下角的div 盒子,确认盒子宽度有 1905px变成了1920px，相差15px; 解决办法： 在入口文件 public == index.html 中 加上样式： body { padding-right: 0px !important; overflow: hidden; } .
el-popover嵌套select弹窗点击实现自定义关闭
徐三岁的博客
07-19 1594
也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。
ElementUI的el-dialog弹窗打开时css的bug
Queen-Shir的博客
12-18 3776
问题描述：el-dialog弹窗没打开时，页面有滚动条，会占据浏览器右侧15px左右的宽度。 dialog打开之后，遮罩层占整个浏览器的宽度，且没有滚动条。网页头部滚动条消失，导致网页头部向右移动15px左右。每次打开dialog网页头部就向右移动；关闭dialog网页头部就向左移动。直接影响美观。 解决方法：在项目的入口文件添加以下css。 <style lang=...
vue中使用elementui的el-dialog遮罩问题
08-29 4541
elementui中的el-dialog有时候会出现以下这种问题，内容在遮罩阴影之下的情况 解决这种情况的方法很简单，在el-dialog标签中添上这个:append-to-body="true"属性即可，如下： :append-to-body="true"
VUE+ElementUI 多选框/单选框鼠标hover悬浮时的提示信息组件
qq_45726323的博客
06-27 3960
VUE+ElementUI+js编写一个多选框/单选框，当鼠标hover悬浮时的提示信息组件。
解决el-dialog弹框出现页面抖动问题
m0_69538493的博客
07-09 1299
main.js(后只需要添加ElementUI.Dialog.props.lockScroll.default = false;添加 Dialog.props.lockScroll.default = false。
.el-menu--popup
06-14
`.el-menu--popup` 是 Element UI（简称 EUI）中的一个CSS类名，它与Element UI的菜单组件（`<el-menu>`）有关，该组件通常用于创建下拉式菜单。当`el-menu`的`type`属性设置为`popup`或者它被嵌套在具有`menu-...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值