当前位置: 首页 > article >正文

Element UI组件Dialog显示闪动问题【解决方案】

在ElementUI中,el-dialog弹窗确实有时会导致页面出现抖动或闪动的问题。这通常是由于弹窗出现时对页面布局的影响,特别是滚动条的出现或消失,导致了页面的重新布局和渲染。以下是一些解决或缓解这一问题的方法:

解决方案

1. 关闭Dialog的滚动条锁定

ElementUI的el-dialog组件在打开时默认会锁定页面的滚动条,这有时会导致页面布局的变化,从而产生抖动。你可以通过设置lockScroll属性为false来关闭这一功能:

全局设置:在main.js中配置ElementUI的Dialog组件的默认属性,添加ElementUI.Dialog.props.lockScroll.default= false; 。 局部设置:在el-dialog标签上直接添加:lockScroll="false"属性。

2. 修改CSS样式

有时,页面的抖动可能是由于CSS样式的不当设置导致的。你可以尝试修改相关的CSS样式来解决这个问题:

重置padding-right:当el-dialog打开时,ElementUI会给body元素添加一个padding-right样式,以防止内容在滚动条消失时溢出。你可以尝试在全局或局部样式中重置这个padding-right值,例如:.el-popup-parent–hidden
{ padding-right: 0px !important; }。
防止页面抖动:有时页面的抖动是由于滚动条的突然出现或消失导致的。你可以尝试在body元素上添加一些样式来防止这种情况的发生,例如:在弹窗打开时设置body的overflow为hidden,在弹窗关闭时恢复

在这里插入图片描述


http://www.kler.cn/a/388340.html

相关文章:

  • Mysql 8迁移到达梦DM8遇到的报错
  • 谷歌浏览器的自动翻译功能如何开启
  • 人工智能的前沿研究方向与未来发展趋势
  • 【MATLAB代码】二维平面上的TDOA,使用加权最小二乘法,不限制锚点数量,代码可复制粘贴
  • 15 个改变世界的开源项目:塑造现代技术的先锋力量
  • Python酷库之旅-第三方库Pandas(208)
  • The First项目报告:MANTRA如何实现世界金融区块链化?
  • 统信UOS开发环境支持Perl
  • 力扣第46题“全排列”
  • 计算机视觉系列----深入浅出了解计算机视觉
  • Leetcode:540. 有序数组中的单一元素
  • Kafka面试题 part-1
  • Unet++改进16:添加DoubleAttention||减少冗余计算和同时存储访问
  • 算法求解 -- (炼码 3853 题)检查是否有路径经过相同数量的0和1
  • 自动化测试工具Ranorex Studio(二十三)-等待UI元素-库超时
  • R和MATLAB及Python混合效应模型
  • 【Flume实操】复制:实时监听 NetCat 端口数据到本地文件系统和 HDFS 案例分析
  • 【工具变量】排污权交易政策试点DID(2000-2023)
  • 如何在Android中自定义property
  • 深入理解数据库事务:概念、特性与控制策略
  • Meta AI 新技术,赋予机器人 “触觉” 的革命
  • 快速克隆你的声音(音色)的网站
  • Mesh网格
  • [Docker#2] 发展历史 | Namespace环境隔离 | Cgroup资源控制
  • LeetCode题练习与总结:字符串中的第一个唯一字符--387
  • 基于 Python 的 Django 框架开发的电影推荐系统