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