解决element弹窗打开时页面往左抖动

最新推荐文章于 2024-03-14 14:42:01 发布
最新推荐文章于 2024-03-14 14:42:01 发布
阅读量610 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tt1234561009/article/details/130831181
版权

相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;

 所以，我们可以在代码中强制修改body的样式，如下

html,body {
    padding-right: 0px !important;
    overflow-x: hidden;
}

亲测有效~

南半球与北海道#
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element弹窗拖拽 v-dialogDrag
02-21
弹窗拖拽使用v-dialogDrag即可实现弹窗拖拽
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
主要介绍了vue中使用element ui的弹窗与echarts之间的问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style=“padding-right: 17px；“ 的解决方法
weixin_61769998的博客
08-14 1166
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style="padding-right: 17px;" 的解决方法
解决el-dialog弹出时，页面抖动，右侧会缩小的问题
在下魔王ii的博客
11-19 2841
问题描述：我们在使用el-dialog时，会发现弹出框弹出时，页面会抖动，直接效果就是页面右侧会发生变化，缩小了几个像素点；体验感不是很好，另一个就是会影响到页面的布局； 解决方法： 1.全局设置body的padding-right: 0 !important；不太可取，虽然可以解决这个问题，但是影响了页面的布局效果； 2.在main.js中，找到引入element的地方，举个例子 import Element from "element-ui"; import "element-ui/l...
解决el-dialog弹窗打开时页面往左抖动问题
最新发布
Cabriella_的博客
03-14 163
App.vue中添加如下样式。
关于element-ui中的el-drawer每弹出一次，其z-index就要自增1
lll19960406的博客
08-30 1085
最近在写一个vue的后台项目，用到了el-drawer，在el-drawer中还嵌套了el-dialog和el-table 然后有时候会发现内嵌的el-dialog会消失不见，就是第一次点击，正常弹出，第二次正常弹出，第三次就不见了，后来发现是被el-drawer盖住了。 于是开始找z-index的原因，发现每次点击，el-drawer的z-index值会依次变大。那么想要弹框每次正常弹出，就需...
解决Element UI的el-dialog弹窗打开时css的显示BUG
GhostUncledrew-blogs
04-08 629
*在使用el-dialog弹窗时 body的内联样式默认会有padding-right: 5px <style lang="less" scoped> // .el-popup-parent--hiddren body{ padding-right: 0 !important; } </style>
修改 el-dialog__body padding
修行小蜗牛的博客
08-03 1474
在dialog外部套个div，再写deep。
解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)
m0_45272038的博客
08-03 1721
后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考 方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；
el-dialog修改默认内边距
gjylalaland的博客
07-25 2087
【代码】el-dialog修改默认内边距。
vue3 修改element plus 内部控件的样式
qq_34736893的博客
08-12 1915
vue3 修改element plus 内部控件的样式
el-dialog修改默认内边距el-dialog__body解决方案
简单点的博客
11-16 1343
el-dialog修改默认内边距el-dialog__body解决方案
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
局部更改element等封装的默认样式的方法
qq_43724644的博客
07-14 701
12.element的el-dialog的body部分默认会有padding: 30px 20px;且无法通过自定义ccs样式更改（解决更改使用的封装的默认样式问题） 解决方式：通过使用/deep/ 的方式 1.通过浏览器的检查，找到封装的样式的class名： 2.在局部的ccs样式中修改封装的默认样式： /deep/ .el-dialog__body{ padding-right: 0; } 来源：https://www.cnblogs.com/yyh28/p/12992861.h
element-UI打开 dialog 抖动
Ton555555的博客
07-26 656
抖动原因： 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; } .
p标签莫名多出32px
weixin_39418338的博客
07-22 167
p标签莫名多出32px
【问题记录】如何修改element中的el-dialog-body样式
m0_56740029的博客
08-17 1901
自用，经验教训记录
vue中使用Element组件el-dialog导致页面偏移——解决方法
weixin_44066534的博客
09-05 5750
在vue项目中里使用Element的el-dialog组件 问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条 解决方法：找到弹出框对应的class再将overflow设置为hidden 问题2：组件引起原页面偏移 修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动 一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style 例如：点击弹框前的body 点击弹框之后 一开始一直把关注点放在组件上，甚至怀疑是e
element 弹窗 最大化
08-09
Element UI是一套基于Vue.js的桌面端UI库，其中也包含了Element Dialog组件，该组件可以用来创建弹窗。要实现Element弹窗最大化的效果，可以通过以下步骤进行操作： 1. 首先，需要在弹窗的外层元素中添加一个v-if...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值