Element UI - 打开弹出框（el-dialog）页面会抖动是什么原因？

原创 已于 2022-07-05 14:37:13 修改 · 1w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#打开弹出框（el-dialog）页面会抖动是什么原因？ #Element UI #body #el-dialog

于 2019-07-07 23:40:12 首次发布
本文描述了一种在对话框弹出时页面发生抖动的现象，并提供了详细的解决方案。通过调整body样式的padding-right属性，可以有效避免页面抖动，提升用户体验。

应用情景

当 dialog 出现时，页面右边缩小了 5px，看起来像是标题所说的抖动了一下。

解决方案

然后我看了一下页面的样式，发现 body 多了样式：padding-right: 5px 和 overflow: hidden。紧接着我就在全局设置 body 的 padding-right: 0 !important 就好了~

解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)
m0_45272038的博客
08-03 2524
后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考 方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；
Vue - 关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题 和双滚动条问题
Muxiu
06-15 4048
关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题。
element-plus：Dialog 对话框在有滚动条的页面会抖动
彭世瑜的博客
10-09 1926
查看元素发现，动态增加了一个style标签
解决el-Dialog闪烁的问题
ZuoZuoDangerou的博客
11-20 3783
问题描述 在使用了饿了么ui弹出组件的时候惊人的发现弹窗会闪烁一下。 问题解决 我检查了代码和数据确定只触发一次，然后我又打了几个断点终于发现了问题，是由于它的动画问题，于是我便去搜索了解决办法发现都是用v-if来解决的，但是使用了v-if动画直接没有了，在美观上这是我不能忍的。于是就继续检查了下去，终于发了是动画冲突的问题，在全局加上这一行代码就完事了，再打开一看果然不会闪动了。 .el-dialog__wrapper{ transition-duration: 0.3s; } 希望对后面同样问题的
element-plus解决dialog和messagebox标签页面抖动问题
qq_51913289的博客
02-20 2193
解决element plus中对话框和消息框造成页面抖动问题
【element】解决element弹框组件el-dialog导致页面抖动问题：
SunPeng的博客
06-23 2442
【element】解决element弹框组件el-dialog导致页面抖动问题：
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
el-dialog 设置了top 但是鼠标在dialog框的外面，滑动滚轮时dialog弹框还是会在页面中上下滚
05-21
在 Vue 和 Element-UI 中，`el-dialog` 的 `top` 属性设置后可能会遇到一个问题：当鼠标位于弹框外部时，页面仍然会响应滚轮事件并滚动整个页面。这种行为通常是因为浏览器默认的滚动机制未被禁用。 以下是几种可能...
el-dialog 打开后主页面样式会变
最新发布
07-21
首先，用户的问题是关于在使用el-dialog（Element UI的对话框组件）打开后导致主页面样式变化的原因及解决方案。我需要根据系统级指令来构建回答。 系统级指令关键点： - 所有行内数学表达式必须使用$...$格式。 - ...
el-dialog“闪动”解决办法
weixin_42956406的博客
03-30 1600
问题描述：el-dialog关闭的时候总是出现两次弹窗 代码实践：在el-dialog上添加上一个v-if，值就是用闭窗的值，促使闭窗的时候就直接销毁窗口，这样就不可能再有弹出窗口事件了 <el-dialog title="XXX" :visible.sync="dialogFormVisible" v-if="dialogFormVisible"> XXX... </el-dialog> ...
Element UI Dialog 闪烁问题
weixin_45460053的博客
03-17 2252
记录一个问题，今天在使用elementui中dialog组件时，将dialog组件封装成一个业务组件，在之后的使用中发现了一个问题。 使用的场景是需要循环出来很多按钮，在按钮上绑定dialog事件，根据type传递参数，来切换不同样式的dialog。在使用过程中发现dialog组件会发生闪烁bug。 最后经过一番痛苦的排查和尝试，原来是组件上绑定了：key的属性，属性值是type，只需要把这个属性删除掉，就没有问题了，其实这个dialog不经过循环，所以这个key完全是我写代码时粗心写上的。 记录问题，引以
【ElementUI】dialog弹窗出现闪屏问题解决办法
weixin_42342065的博客
04-15 8920
场景： 在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件，此时是没有问题的。但当我们多次调用弹窗的时候，比如：有A,B,C三个弹窗，当弹窗A点击确定的时候关闭弹窗A打开弹窗B，当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C，在弹窗切换的时候会出现闪烁一下的情况。原因是：当一个弹窗关闭之后另一个弹窗可能还没打开，这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下： 解决办法： 给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘di
element-plus打开Dialog、图片预览导致页面抖动
JamesCurtis的博客
07-20 1696
element-plus或element-ui打开Dialog、图片预览等有遮罩层的组件导致页面抖动。经过一番排查，这里还需要设置一下高度，要让外层的元素固定高度为整个页面的高度100vh，内层元素的高度就随便了。只要外层高度固定，不超过一屏那么就不会显示浏览器的滚动条。但是发现element-plus官方文档里面的预览并没有抖动，于是就f12看了下他们是咋实现的。属性会集成父级高度，所以效果和上面一样的。可.........
多个el-dialog弹框切换会出现闪烁
m0_56683897的博客
08-14 1488
这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。
element的el-dialog初始化visible值为true时，弹窗闪烁问题
Wangdr的博客
10-09 537
设置这个参数为true。
关于在Element-UI的dialog对话框中点击选中导致对话框闪烁的问题
fmyahxm的博客
08-14 3135
问题描述： 在dialog中使用select选择器和radio单选框点击导致对话框闪烁，为什么会出现这种情况呢？我们先来看下解决方法！ 解决方法： 1.在对话框中添加backface-visibility属性 — 意为旋转元素不面向屏幕时隐藏 .el-dialog{ backface-visibility:hidden; -webkit-backface-visibility:...
使用element-ui的弹出框(dialog)，页面会抖动一下
zhengyue1314的专栏
07-28 3764
在使用Element UI点击按钮，弹出dialog对话框，会出现页面抖动的现象，发现弹出dialog时，样式发生了以下变化： body的style会添加一个padding和hidden 按照以下修改即可： <style> body{ padding-right: 0px !important; overflow: hidden; } </style> ...
element-ui解决el-dialog的闪烁问题
qazxbjp2010的博客
04-14 7109
之前的项目都是网站项目，一般都是要自己写UI，最近开发后台项目使用element-ui，也遇到了一些坑，譬如在使用is动态组件的时候，两个动态组件都是dialog，切换的时候会闪烁，查了半天原因发现是dialog打开和关闭动画造成的。 简单粗暴的解决方法是直接在dialog加v-if="visible" 这样就没有关闭动画了，解决闪烁。 在优化一点的方案是把dialog在独立成一个组件，在di...
使用Vue+elementUI开发前端页面，打开对话框时页面出现抖动的问题
weixin_42965737的博客
10-27 3666
** 打开对话框时页面出现抖动是因为页面的右侧出现滑块,打开对话框的时候滑块消失造成抖动。 ** <style scope> /* 防止打开对话框时页面的抖动 */ body{ padding-right: 0px !important; overflow: hidden; } </style> 如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。 ...
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陆克和他的代码

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

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

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

打赏作者

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

抵扣说明：

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

余额充值