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

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

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


编程达人
目录
相关文章
wljslmz
|
负载均衡 Ubuntu 应用服务中间件
如何在 Ubuntu 22.04 上安装、配置、使用 Nginx？
【2月更文挑战第3天】
wljslmz
26355 4
如何在 Ubuntu 22.04 上安装、配置、使用 Nginx？
兜里只有三分钱~
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例（整理）
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例（整理）
兜里只有三分钱~
1136 0
龙哥手记
|
JSON JavaScript 前端开发
前端重磅推荐，不要错过啊（一）
笔记
龙哥手记
889 0
jouypub
|
开发工具 git 缓存
Git忽略规则.gitignore不生效
在项目开发过程中个，一般都会添加 .gitignore 文件，规则很简单，但有时会发现，规则不生效。 原因是 .gitignore 只能忽略那些原来没有被track的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。
jouypub
61964 4
fruge365
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
fruge365
575 0
蓝染-惣右介
|
12月前
|
监控 NoSQL Java
若依RuoYi项目环境搭建教程（RuoYi-Vue + RuoYi-Vue3版本）
若依（RuoYi）是一款基于Spring Boot和Vue.js的开源Java快速开发脚手架，支持OAuth2、JWT鉴权，集成多种安全框架和持久化框架。它提供了系统管理、监控管理、任务调度、代码生成等常用功能模块，适合中小型公司快速搭建Web应用。本文主要介绍若依框架的特点、版本发展、优缺点及项目部署步骤，帮助开发者快速上手并部署若依项目。
蓝染-惣右介
13401 3
若依RuoYi项目环境搭建教程（RuoYi-Vue + RuoYi-Vue3版本）
石小石Orz
|
开发框架
threejs做特效：实现物体的发光效果-EffectComposer详解！
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解！
石小石Orz
2292 6
threejs做特效：实现物体的发光效果-EffectComposer详解！
Yaiba123
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化，包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果，并提供了详细的代码示例和实现效果。
Yaiba123
3643 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
星繁
|
SQL 机器学习/深度学习 XML
mybatis-plus分页查询详解
mybatis-plus分页查询详解
星繁
10793 0
mybatis-plus分页查询详解
朝阳39
|
缓存 JavaScript
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
朝阳39
1548 0

热门文章

最新文章

  • 1
    OpenSearch大模型实践之Havenask篇
  • 2
    一文掌握：Gitlab的完整使用手册
  • 3
    java实现图片与base64转换
  • 4
    手机验证码登录
  • 5
    Pycharm2022最新版安装破解与激活教程，亲测可用
  • 6
    Java单元测试之 单元测试规范
  • 7
    Exchange 中关于邮件的生命周期和托管文件夹的相关设定
  • 8
    抽象工厂模式
  • 9
    Android按返回键（后退键）Back键事件捕获的两种方法
  • 10
    Linux下安装显卡Run格式
  • 1
    关于synchronized-reentrantlock-volatile学习总结1.0
    39
  • 2
    最新PyCharm 安装详细图文教程：小白也能轻松搞定
    67
  • 3
    用错工具比没工具更可怕：Ansible vs Terraform 实战对比，用最接地气的方式讲清楚
    61
  • 4
    别等系统报警了才想起 Trace！——分布式事务可观测性的那些坑与优化套路
    55
  • 5
    数据建模到底怎么稳？从维度建模聊到列式存储，让你的数据仓库飞起来！
    44
  • 6
    基于反馈循环的自我进化AI智能体：原理、架构与代码实现
    65
  • 7
    LLM为何难以胜任复杂任务？探索AI认知局限
    60
  • 8
    【Java架构师体系课 | MySQL篇】⑦ 深入理解MySQL事务隔离级别与锁机制
    51
  • 9
    阿里云服务器最便宜多少钱一年？38元一年，配置、价格及购买限制说明
    64
  • 10
    强化网站安全的利器（Nginx中如何正确配置HSTS安全头）
    45

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格