AI 助理
备案控制台
开发者社区 彭世瑜的博客 文章 正文

element-plus：Dialog 对话框在有滚动条的页面会抖动

2023-04-14 486
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： element-plus：Dialog 对话框在有滚动条的页面会抖动

image.png

查看元素发现，动态增加了一个style标签

<body class="el-popup-parent--hidden" style="width: calc(100% - 15px);">
</body>

解决方法

增加一个参数lock-scroll="false" ,解除在 Dialog 出现时 body 滚动锁定

<el-dialog :lock-scroll="false">
</el-dialog>

参考

https://element-plus.gitee.io/zh-CN/component/dialog.html

[Style] el-popup-parent–hidden 会携带 width: calc(100% - 8px) 样式 #9937


编程达人
目录
相关文章
a15034260562-24955
|
6月前
|
前端开发 网络安全 数据库
使用layui弹框实现添加时，当添加成功之后如何进行关闭当前窗口刷新父页面的数据
使用layui弹框实现添加时，当添加成功之后如何进行关闭当前窗口刷新父页面的数据
a15034260562-24955
55 0
埃尔文
|
2月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
287 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
朝阳39
|
4月前
element UI【解决方案】消息弹框被对话框遮挡（$message消息框被dialog或$alert遮罩）
element UI【解决方案】消息弹框被对话框遮挡（$message消息框被dialog或$alert遮罩）
朝阳39
203 3
朝阳39
|
4月前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏，自定义图标
Element UI 密码输入框--可切换显示隐藏，自定义图标
朝阳39
208 0
你挚爱的强哥
|
6月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
你挚爱的强哥
238 0
嘘~！
|
6月前
uniapp popup弹出窗详解以及相关属性
uniapp popup弹出窗详解以及相关属性
嘘~！
697 3
多加点香菜85
|
6月前
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
多加点香菜85
237 0
你挚爱的强哥
|
6月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
你挚爱的强哥
182 0
大可。
|
JavaScript
element-ui的popover弹出框点击取消
element-ui的popover弹出框点击取消
大可。
270 1
兜里只有三分钱~
element关闭弹窗点击背景色（整理）
element关闭弹窗点击背景色（整理）
兜里只有三分钱~
63 0