vue使用elementUI的dialog弹窗,出现延时问题?

问题描述

我利用elementui的dialog弹窗,包含<router-view>,
点击不同的数据,弹窗显示不同的组件,当组件的数据显示较多时,在弹窗会出现延时,请问大佬,这个怎么解决?

问题出现的环境背景及自己尝试过哪些方法

尝试先弹窗,$nextTick里加载路由,也会出现延时,可能是原组件中数据较多,导致显示变慢。

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<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
      }
    })
  })

}

你期待的结果是什么?实际看到的错误信息又是什么?

怎么才能立即弹窗,弹窗之后再跳转路由?导致弹窗延迟的原因是什么?是组件内数据较多吗?

阅读 15k
2 个回答

经过多重测试,解决方法:
1.方法:先让弹窗显示,改变dialog中visible的值,再用$nextTick,下一帧跳转路由,然后效果并不好,还是有延时。
延时原因:visible设为true时,弹窗不是立即显示,有一个0.3秒的动画,这0.3秒的动画在执行过程中,路由已经开始跳转了,导致弹窗内的内容渲染(有可能内容渲染阻塞了动画),从而出现延时弹窗问题。

2.不采用$nextTick,用setTimeout延时执行路由跳转,当弹窗动画执行完后,再调转路由,弹窗无延时了。(弹窗内的内容的加载过程就可见了,这样的效果比点一下过1-2秒弹窗好多了)

新手上路,请多包涵

可以先直接修改dialog的visible的值先显示出dialog,然后再通过@opened或者@open执行其他耗时的逻辑

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题