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

已于 2022-07-05 14:37:13 修改
阅读量1w 收藏 12
点赞数 6
CC 4.0 BY-SA版权
分类专栏： # Element UI 文章标签： 打开弹出框（el-dialog）页面会抖动是什么原因？ Element UI body el-dialog
于 2019-07-07 23:40:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream_Weave/article/details/95041203

应用情景

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

解决方案

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

elementUI 源码-打造自己的组件库，系列四：Dialog组件(原创)
m13837120071的博客
08-07 1933
来吧继续一起阅读组件源码，dialog组件安排上。个人觉得dialog组件的难点在于弹出框的流程，特别是层级的处理。 当然其他小的知识点也是不少的，这就是阅读源码的小快乐吧
element-plus：Dialog 对话框在有滚动条的页面会抖动
彭世瑜的博客
10-09 1788
查看元素发现，动态增加了一个style标签
解决el-Dialog闪烁的问题
ZuoZuoDangerou的博客
11-20 3678
问题描述 在使用了饿了么ui弹出组件的时候惊人的发现弹窗会闪烁一下。 问题解决 我检查了代码和数据确定只触发一次，然后我又打了几个断点终于发现了问题，是由于它的动画问题，于是我便去搜索了解决办法发现都是用v-if来解决的，但是使用了v-if动画直接没有了，在美观上这是我不能忍的。于是就继续检查了下去，终于发了是动画冲突的问题，在全局加上这一行代码就完事了，再打开一看果然不会闪动了。 .el-dialog__wrapper{ transition-duration: 0.3s; } 希望对后面同样问题的
【ElementUI】el-dialog让其内容在其内部滚动
qq_50692372的博客
05-07 164
参考：https://blog.csdn.net/m0_50981596/article/details/124730050。tips: div一定要加高度，否则会无效。声明：日常记录，避免下次遇到此问题找不到。
element-plus解决dialog和messagebox标签页面抖动问题
qq_51913289的博客
02-20 2059
解决element plus中对话框和消息框造成页面抖动问题
【element】解决element弹框组件el-dialog导致页面抖动问题：
SunPeng的博客
06-23 2377
【element】解决element弹框组件el-dialog导致页面抖动问题：
el-dialog“闪动”解决办法
weixin_42956406的博客
03-30 1559
问题描述：el-dialog关闭的时候总是出现两次弹窗 代码实践：在el-dialog上添加上一个v-if，值就是用闭窗的值，促使闭窗的时候就直接销毁窗口，这样就不可能再有弹出窗口事件了 <el-dialog title="XXX" :visible.sync="dialogFormVisible" v-if="dialogFormVisible"> XXX... </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闪屏
03-14
打开 `el-dialog` 后会生成一个遮罩层，如果页面内容的高度发生变化或者存在溢出隐藏 (`overflow: hidden`) 的设置，则可能导致页面整体布局调整，进而引发抖动或闪屏现象[^3]。 4. **多弹窗切换逻辑不当** 如果...
vue3 el-dialog恢复顶部
04-03
在 Vue3 的项目中，如果使用 Element Plus（Element UI 的升级版），可以参考以下方式来解决 `el-dialog` 关闭后再打开时滚动条未恢复到顶部的问题。 #### 方法一：通过监听 `closed` 事件重置滚动位置 可以通过...
Element UI Dialog 闪烁问题
weixin_45460053的博客
03-17 2204
记录一个问题，今天在使用elementui中dialog组件时，将dialog组件封装成一个业务组件，在之后的使用中发现了一个问题。 使用的场景是需要循环出来很多按钮，在按钮上绑定dialog事件，根据type传递参数，来切换不同样式的dialog。在使用过程中发现dialog组件会发生闪烁bug。 最后经过一番痛苦的排查和尝试，原来是组件上绑定了：key的属性，属性值是type，只需要把这个属性删除掉，就没有问题了，其实这个dialog不经过循环，所以这个key完全是我写代码时粗心写上的。 记录问题，引以
【ElementUI】dialog弹窗出现闪屏问题解决办法
weixin_42342065的博客
04-15 8666
场景： 在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件，此时是没有问题的。但当我们多次调用弹窗的时候，比如：有A,B,C三个弹窗，当弹窗A点击确定的时候关闭弹窗A打开弹窗B，当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C，在弹窗切换的时候会出现闪烁一下的情况。原因是：当一个弹窗关闭之后另一个弹窗可能还没打开，这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下： 解决办法： 给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘di
element-plus打开Dialog、图片预览导致页面抖动
JamesCurtis的博客
07-20 1593
element-plus或element-ui打开Dialog、图片预览等有遮罩层的组件导致页面抖动。经过一番排查，这里还需要设置一下高度，要让外层的元素固定高度为整个页面的高度100vh，内层元素的高度就随便了。只要外层高度固定，不超过一屏那么就不会显示浏览器的滚动条。但是发现element-plus官方文档里面的预览并没有抖动，于是就f12看了下他们是咋实现的。属性会集成父级高度，所以效果和上面一样的。可.........
多个el-dialog弹框切换会出现闪烁
m0_56683897的博客
08-14 1345
这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。
关于在Element-UI的dialog对话框中点击选中导致对话框闪烁的问题
fmyahxm的博客
08-14 3077
问题描述： 在dialog中使用select选择器和radio单选框点击导致对话框闪烁，为什么会出现这种情况呢？我们先来看下解决方法！ 解决方法： 1.在对话框中添加backface-visibility属性 — 意为旋转元素不面向屏幕时隐藏 .el-dialog{ backface-visibility:hidden; -webkit-backface-visibility:...
使用element-ui的弹出框(dialog)，页面会抖动一下
zhengyue1314的专栏
07-28 3722
在使用Element UI点击按钮，弹出dialog对话框，会出现页面抖动的现象，发现弹出dialog时，样式发生了以下变化： body的style会添加一个padding和hidden 按照以下修改即可： <style> body{ padding-right: 0px !important; overflow: hidden; } </style> ...
element-ui解决el-dialog的闪烁问题
qazxbjp2010的博客
04-14 7041
之前的项目都是网站项目，一般都是要自己写UI，最近开发后台项目使用element-ui，也遇到了一些坑，譬如在使用is动态组件的时候，两个动态组件都是dialog，切换的时候会闪烁，查了半天原因发现是dialog打开和关闭动画造成的。 简单粗暴的解决方法是直接在dialog加v-if="visible" 这样就没有关闭动画了，解决闪烁。 在优化一点的方案是把dialog在独立成一个组件，在di...
使用Vue+elementUI开发前端页面，打开对话框时页面出现抖动的问题
weixin_42965737的博客
10-27 3626
** 打开对话框时页面出现抖动是因为页面的右侧出现滑块,打开对话框的时候滑块消失造成抖动。 ** <style scope> /* 防止打开对话框时页面的抖动 */ body{ padding-right: 0px !important; overflow: hidden; } </style> 如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。 ...
element-ui弹出框
03-12
### 关于 Element UI 弹出框的使用 #### 子组件中的弹窗实例 在 Vue 和 Element UI 组合使用的场景里，可以通过定义子组件来创建一个带有表单验证功能的弹窗。具体来说，在 `detail.vue` 文件中可以找到如下结构[^1]： ```vue <template> <el-dialog :visible.sync="dialogVisible"> <!-- 表单项 --> <el-form ref="form" :model="formData" label-width="80px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> ... </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="submitForm('form')">确 定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, formData: {} }; }, methods: { closeDialog() { this.dialogVisible = false; }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); this.closeDialog(); } else { console.log('错误提交!!'); return false; } }); } } }; </script> ``` #### 父组件调用方式 对于父级组件而言，则是在适当位置引入并注册该子组件，并提供必要的属性绑定以及事件监听逻辑。例如在 `Home.vue` 中有这样一段代码用于控制弹窗显示与否及其内部数据传递: ```vue <template> <div id="app"> <button @click="openDialog">打开详情页</button> <DetailComponent :visible.sync="isShow"/> </div> </template> <script> import DetailComponent from './components/detail'; export default { components: { DetailComponent }, data(){ return{ isShow:false } }, methods:{ openDialog(){ this.isShow=true; } } } </script> ``` #### 增加前置校验机制 为了确保用户体验良好，可以在触发弹窗展示之前加入一些简单的业务规则检验流程。比如当用户点击按钮准备开启对话框时先执行某些条件判断，如果不符合预期则阻止其继续操作并给出相应提示信息。这方面的处理思路已经在实际案例中有过描述[^4]。 #### 使用 Popover 实现其他类型的浮层效果 除了标准意义上的模态窗口外，Element 还提供了另一种轻量级的选择——Popover（气泡卡片），适用于更灵活多变的应用场合。它允许开发者自定义触发器、内容区域乃至交互行为模式等细节设置[^3]。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Dream_Weave

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

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

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

打赏作者

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

抵扣说明：

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

余额充值