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,在弹窗关闭时恢复