When vue uses elementUI's dialog pop-up window, there is a delay problem?

problem description

I use elementui"s dialog pop-up window to include < router-view > ,
click on different data, and the pop-up window displays different components. When the component data is displayed more, there will be a delay in the pop-up window. Excuse me, boss, how to solve this?

the environmental background of the problems and what methods you have tried

try to pop up the window first. If the route is loaded in $nextTick, there will also be a delay. It may be due to the fact that there is too much data in the original component, resulting in slower display.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<el-dialog :title="dialogTitle"  custom-class="dialogYs"  :visible.sync="dialogVisible">
    <router-view></router-view>
</el-dialog>

openWindow(url,data,title){
  var _that=this;
  this.dialogTitle=title;
  this.dialogVisible=true;
  this.$nextTick(()=>{
    _that.$router.push({
      path:url,
      query:{
        id:data.id
      }
    })
  })

}

what result do you expect? What is the error message actually seen?

how can I pop up the window immediately, and then jump to change the route after the pop-up window? What is the cause of the pop-up window delay? Is there more data in the component?

Dec.28,2021

you can directly modify the visible value of dialog to display dialog, and then execute other time-consuming logic


through @ opened or @ open.

after multiple tests, the solution:
1. Method: first let the pop-up window display, change the value of visible in dialog, and then use $nextTick, to jump to the next frame to jump to the route, and then the effect is not good, there is still a delay.
cause of delay: when visible is set to true, the pop-up window does not display immediately. There is a 0.3-second animation. During the execution of the 0.3-second animation, the route has already started to jump, resulting in the rendering of the content in the pop-up window (it is possible that the content rendering blocks the animation), resulting in the problem of delay pop-up window.

2. Do not use $nextTick, to perform the route jump with setTimeout delay. When the pop-up window animation is finished, the route will be changed, and there will be no delay in the pop-up window. (the loading process of the content in the pop-up window can be seen, which is much better than clicking the pop-up window for 1-2 seconds.)

Menu