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

最新推荐文章于 2024-03-14 14:42:01 发布
最新推荐文章于 2024-03-14 14:42:01 发布
阅读量815 收藏 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;
}

亲测有效~

element弹窗拖拽 v-dialogDrag
02-21
弹窗拖拽使用v-dialogDrag即可实现弹窗拖拽
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
在Vue.js应用中，结合Element UI和ECharts进行开发时，可能会遇到一些特定的问题，尤其是在使用Element UI的弹窗组件（如`el-drawer`）内嵌ECharts图表时。本文将深入探讨这个问题，并提供解决方案。 首先，问题的...
vue+element 项目弹窗打开后头部内容左移的问题
qq_38344363的博客
12-31 1007
这个问题比较简单，很多人会陷入一个误区，就是想是不是组件有什么问题或者是不是因为滚动条占位导致的头部内容左移。 其实是layout的头部占位被挤压的问题，只要给layout的头部加上宽度100%，就可以解决这个问题，也可以直接加上绝对定位让头部不占用空间来解决，这样也可以避免被挤压。 这是弹窗打开后的头部占位，明显被挤压了，正常应该是占总宽度的100%，具体为什么会被挤压我也不太清楚，希望有大神可以解释 ...
使用element-ui的弹出框(dialog)，页面会抖动一下
zhengyue1314的专栏
07-28 3630
在使用Element UI点击按钮，弹出dialog对话框，会出现页面抖动的现象，发现弹出dialog时，样式发生了以下变化： body的style会添加一个padding和hidden 按照以下修改即可： <style> body{ padding-right: 0px !important; overflow: hidden; } </style> ...
vue中使用Element组件el-dialog导致页面偏移——解决方法
weixin_44066534的博客
09-05 6437
在vue项目中里使用Element的el-dialog组件 问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条 解决方法：找到弹出框对应的class再将overflow设置为hidden 问题2：组件引起原页面偏移 修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动 一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style 例如：点击弹框前的body 点击弹框之后 一开始一直把关注点放在组件上，甚至怀疑是e
vue中el-dialog弹窗出现时页面整体左移
m0_73857425的博客
04-23 912
【代码】vue中el-dialog弹窗出现时页面整体左移。
解决el-dialog弹窗打开时页面往左抖动问题
最新发布
Cabriella_的博客
03-14 239
App.vue中添加如下样式。
Element UI - 打开弹出框（el-dialog）页面会抖动是什么原因
yuenandehutu的博客
11-25 514
看一下页面的样式，发现 body 多了样式：padding-right: 5px 和 overflow: hidden。 紧接着我就在全局设置 body 的 padding-right: 0 !important 就好了~
element-ui中dialog弹窗关闭按钮失效的解决
10-14
在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...
Element UI - 打开弹出框（el-dialog）页面会抖动是什么原因？
热门推荐
yuenandehutu的博客
12-03 1万+
Element UI - 打开弹出框（el-dialog）页面会抖动是什么原因？ 然后我看了一下页面的样式，发现 body 多了样式：padding-right: 5px 和 overflow: hidden。 紧接着我就在全局设置 body 的 padding-right: 0 !important 就好了~ ...
element-plus打开Dialog、图片预览导致页面抖动
JamesCurtis的博客
07-20 1480
element-plus或element-ui打开Dialog、图片预览等有遮罩层的组件导致页面抖动。经过一番排查，这里还需要设置一下高度，要让外层的元素固定高度为整个页面的高度100vh，内层元素的高度就随便了。只要外层高度固定，不超过一屏那么就不会显示浏览器的滚动条。但是发现element-plus官方文档里面的预览并没有抖动，于是就f12看了下他们是咋实现的。属性会集成父级高度，所以效果和上面一样的。可.........
【干货分享】解决element弹框组件导致页面抖动问题
希望看完文章的你能够带着答案离开
07-26 3959
【干货分享】解决element弹框组件导致页面抖动问题
使用Vue+elementUI开发前端页面，打开对话框时页面出现抖动的问题
weixin_42965737的博客
10-27 3558
** 打开对话框时页面出现抖动是因为页面的右侧出现滑块,打开对话框的时候滑块消失造成抖动。 ** <style scope> /* 防止打开对话框时页面的抖动 */ body{ padding-right: 0px !important; overflow: hidden; } </style> 如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。 ...
element-plus：Dialog 对话框在有滚动条的页面会抖动
彭世瑜的博客
10-09 1608
查看元素发现，动态增加了一个style标签
解决使用el-dialog之后底层的布局会被向左挤压
qq_52214334的博客
01-03 736
在做vue3+element-plus的时候，很多地方用到了弹窗，但是每次使用弹窗的时候都会发现一个问题，弹窗下面的布局会因为弹窗的出现而被挤压。解决方案，在css初始化的样式中将body的宽度定好，问题解决。仔细观察了一下组件本身的样式，没发现问题。最后将注意点放在了body上面，==
Vue2原型挂载sessionStorage、localStorage、element弹窗
03-04
假设我们需要在弹窗中使用存储的数据，可以在打开弹窗时读取localStorage或sessionStorage的数据，然后展示在弹窗内。同样，也可以在关闭弹窗时保存用户在弹窗中的修改。例如： ```html 我的弹窗" width="50%"> ...
Element-UI 对话框 显示偏移问题
yb305
04-27 1521
问题描述： 超出部分隐藏了滚动条 当显示dialog的时候，界面向左偏移出现一条空白区域 查看样式发现，body里被添加了一个padding-right:17px; 解决办法: 在全局样式中添加一下代码 .el-popup-parent--hidden { padding-right: 0px !important; overflow: hidden !important; } ...
element-plus解决dialog和messagebox标签页面抖动问题
qq_51913289的博客
02-20 1701
解决element plus中对话框和消息框造成页面抖动问题
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值