【ElementUI】dialog弹窗出现闪屏问题解决办法

场景:
在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件,此时是没有问题的。但当我们多次调用弹窗的时候,比如:有A,B,C三个弹窗,当弹窗A点击确定的时候关闭弹窗A打开弹窗B,当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C,在弹窗切换的时候会出现闪烁一下的情况。原因是:当一个弹窗关闭之后另一个弹窗可能还没打开,这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下:
【ElementUI】dialog弹窗出现闪屏问题解决办法_第1张图片

解决办法:
给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘disableDialog’),则需要把弹窗A的disableDialog属性设为false,setTimeout(() => {this.disableDialog = false},100)

你可能感兴趣的:(vue,前端,elementui)