使用Element ui中的el-dialog时页面出现抖动

最新推荐文章于 2024-08-01 12:04:59 发布
最新推荐文章于 2024-08-01 12:04:59 发布
阅读量763 收藏 1
点赞数 1
分类专栏： 技术 文章标签： elementui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58404099/article/details/117114118
版权

打开el-dialog对话框时，屏幕右侧出现滚动条，body的样式中多出了一个padding-right: 17px

解决方式：

// 全局配置样式
body { padding-right: 0 !important}
hazyram
关注
专栏目录
Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
王佳斌
03-27 7102
vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
解决el-dialog弹出时，主页（滚动条）左右伸缩抖动问题
lianganton的专栏
04-25 927
问题描述：当主页列表有横向滚动条时，查看行详情，弹出el-dialog时，会发现弹出框弹出时，页面会抖动，直接效果就是页面右侧会发生变化，缩小了几个像素点；体验感不是很好，另一个就是会影响到页面的布局；important；不太可取，虽然可以解决这个问题，但是影响了页面的布局效果；看了一下，应该是页面存在滚动条，弹出在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；可以找到样式类重写；最直接的方法参考 2；2.在main.js中，找到引入element的地方，举个例子。
容器出现滚动条导致布局抖动问题
最新发布
weixin_45598400的博客
08-01 257
容器出现滚动条导致布局抖动问题
【element】解决element弹框组件el-dialog导致页面抖动问题：
SunPeng的博客
06-23 2054
【element】解决element弹框组件el-dialog导致页面抖动问题：
关于在Element-UI的dialog对话框中点击选中导致对话框闪烁的问题
fmyahxm的博客
08-14 2977
问题描述： 在dialog中使用select选择器和radio单选框点击导致对话框闪烁，为什么会出现这种情况呢？我们先来看下解决方法！ 解决方法： 1.在对话框中添加backface-visibility属性 — 意为旋转元素不面向屏幕时隐藏 .el-dialog{ backface-visibility:hidden; -webkit-backface-visibility:...
Vue - 关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题 和双滚动条问题
Muxiu
06-15 3433
关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的应用场景中，我们需要对Dialog组件进行更深入的定制。 首先，我们来理解一下Dialog组件的基础用法。Dialog组件是用于展示弹出式对话框的组件，它可以...
解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)
m0_45272038的博客
08-03 2055
后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考 方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；
多个el-dialog弹框切换会出现闪烁
m0_56683897的博客
08-14 1006
这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。
element-plus打开Dialog、图片预览导致页面抖动
JamesCurtis的博客
07-20 1427
element-plus或element-ui打开Dialog、图片预览等有遮罩层的组件导致页面抖动。经过一番排查，这里还需要设置一下高度，要让外层的元素固定高度为整个页面的高度100vh，内层元素的高度就随便了。只要外层高度固定，不超过一屏那么就不会显示浏览器的滚动条。但是发现element-plus官方文档里面的预览并没有抖动，于是就f12看了下他们是咋实现的。属性会集成父级高度，所以效果和上面一样的。可.........
解决element中对话框遮挡的问题，让你的页面更美观
Shids_的博客
11-04 3284
解决element中对话框遮挡的问题，让你的页面更美观
ElementUI侧边导航栏出现滚动条 如何去除
一个小透明的博客
04-15 6404
ElementUI会出现如上图所示的侧边栏滚动条 .menu-wrapper{ overflow: hidden; } 加入溢出隐藏就可以去除滚动条了
使用element-ui的弹出框(dialog)，页面会抖动一下
zhengyue1314的专栏
07-28 3590
在使用Element UI点击按钮，弹出dialog对话框，会出现页面抖动的现象，发现弹出dialog时，样式发生了以下变化： body的style会添加一个padding和hidden 按照以下修改即可： <style> body{ padding-right: 0px !important; overflow: hidden; } </style> ...
解决element弹窗打开时页面往左抖动
tt1234561009的博客
05-23 772
相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。
解决el-dialog弹框引起的body抖动问题
肖帅的博客
05-25 1699
解决el-dialog弹框引起的body抖动问题 1，开发中发现使用el-dialog出现抖动的问题，找了好久才找到解决问题的方法。 2，解决该问题在el-dailog上添加 :lock-scroll="false" 代码如下： <el-dialog :visible.sync="auditFlag" :close-on-click-modal="false" custom-class="my-dia
【ElementUI】dialog弹窗出现闪屏问题解决办法
weixin_42342065的博客
04-15 7929
场景： 在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件，此时是没有问题的。但当我们多次调用弹窗的时候，比如：有A,B,C三个弹窗，当弹窗A点击确定的时候关闭弹窗A打开弹窗B，当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C，在弹窗切换的时候会出现闪烁一下的情况。原因是：当一个弹窗关闭之后另一个弹窗可能还没打开，这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下： 解决办法： 给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘di
Element ui关闭el-dialog
07-27
- *1* [element ui中el-dialog如何自定义标题，加图标](https://blog.csdn.net/qq_42931285/article/details/124701902)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值