多个el-dialog弹框切换会出现闪烁

在使用element-ui的弹窗组件el-dialog时候,可能会有这样子的需求,点击新增按钮或者修改按钮,打开一个弹窗,然后点击下一步,关闭当前弹窗,打开另一个弹窗,最后在第二步或者第三步弹窗提交数据,像这样。

                                                                            ↓↓

 这时候我们在点击下一步执行方法,关闭上一个弹窗打开下一个弹窗的时候,页面有一个明显的闪烁,对于用户体验来说不够丝滑,其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层,开启的时候重新打开遮罩层导致的,使他们中间有一个亮度的闪烁,解决方法也很简单。

     addNext() {
        setTimeout(() => {    // 做一个定时器
          this.addVisible = false
        }, 10)
        this.addNextVisible = true
      },

就是在关闭上一步弹窗得时候加一个定时器,让他延迟关闭,先打开新弹窗,旧的弹窗还没有关闭,这样就不会有遮罩层空白的时候了。

猜你喜欢

转载自blog.csdn.net/m0_56683897/article/details/132275670