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

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

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


编程达人
目录
相关文章
蒾酒
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
蒾酒
3351 0
wljslmz
|
负载均衡 Ubuntu 应用服务中间件
如何在 Ubuntu 22.04 上安装、配置、使用 Nginx？
【2月更文挑战第3天】
wljslmz
24287 4
如何在 Ubuntu 22.04 上安装、配置、使用 Nginx？
兜里只有三分钱~
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例（整理）
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例（整理）
兜里只有三分钱~
1076 0
迪科斯彻
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
迪科斯彻
162434 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
fruge365
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
fruge365
459 0
答神~
|
JavaScript
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源 c
答神~
1895 0
路遥叶子
|
存储 对象存储
【阿里云OSS】You have no right to access this object because of bucket acl.
【阿里云OSS】You have no right to access this object because of bucket acl.
路遥叶子
17963 1
【阿里云OSS】You have no right to access this object because of bucket acl.
码喽的自我修养
el-dialog使用::v-deep()穿透设置样式不生效，解决办法亲测有效！
el-dialog使用::v-deep()穿透设置样式不生效，解决办法亲测有效！
码喽的自我修养
2332 0
n2t3mdveprf54
|
JavaScript
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
n2t3mdveprf54
2478 0
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
星繁
|
SQL 机器学习/深度学习 XML
mybatis-plus分页查询详解
mybatis-plus分页查询详解
星繁
10568 0
mybatis-plus分页查询详解

热门文章

最新文章

  • 1
    网页特殊符号HTML代码大全
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    杨老师课堂_Java教程第六篇之引用数据类型_类的运用
  • 5
    Point Grey articles link
  • 6
    培养我们的目标感
  • 7
    IE6中png图片透明方法
  • 8
    A Go library implementing an FST (finite state transducer)——mark下
  • 9
    在网站设计中非常有用的10款在线生成工具
  • 10
    3Animation动画的创建，CCSpeed,CCFollow
  • 1
    《时序数据监控平台优化指南：从查询超时到秒级响应，指标下的存储与检索重构实践》
    18
  • 2
    《API网关性能优化指南：从请求拥堵到毫秒级响应，并发下的架构重构实践》
    23
  • 3
    边缘大型AI模型：协作部署与物联网应用——论文阅读
    49
  • 4
    基于 Cloudflare Workers 构建高性能知识库镜像服务：反向代理与 HTML 动态重写实践
    36
  • 5
    PINN训练新思路：把初始条件和边界约束嵌入网络架构，解决多目标优化难题
    23
  • 6
    基于yolo8的深度学习室内火灾监测识别系统
    34
  • 7
    基于springboot的家校合作管理系统
    31
  • 8
    以Lama Cleaner的AI去水印工具理解人工智能中经常会用到GPU来计算的CUDA是什么？ 优雅草-卓伊凡
    23
  • 9
    PowerShell域内信息收集技术—Powerview用法
    21
  • 10
    VMware Tools 13.0.5.0 发布 - 客户机操作系统无缝交互必备组件
    41

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费