Multiple el-dialog pop-up boxes will flicker when switching.

When using element-ui's pop-up component el-dialog, you may have the need to click a new button or modify a button to open a pop-up window, then click Next to close the current pop-up window and open another pop-up window. , and finally submit the data in the second or third step pop-up window, like this.

                                                                            ↓↓

 At this time, when we click the next step to execute the method, close the previous pop-up window and open the next pop-up window, the page has an obvious flicker, which is not smooth enough for the user experience. In fact, it is not difficult to see that it is because the previous pop-up window is closed. This is caused by closing the mask layer when opening the window and reopening the mask layer when opening the window, causing a brightness flicker between them. The solution is also very simple.

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

That is to add a timer when closing the previous pop-up window to delay its closing, and open the new pop-up window first. The old pop-up window has not been closed yet, so that there will be no time when the mask layer is blank.