Vue 点浏览器后退 模态框有灰色遮罩。监听返回键 this 无效

avatar 2022年08月23日09:48:49 0 149 views
博主分享免费Java教学视频,B站账号:Java刘哥

前端使用 <el-dialog 实现模态框

当打开模态框后,点击浏览器上的后退按钮,发现遮罩还在。

解决办法

监听返回键,遇到的问题是直接用 this.xxx 无效,原因是此处 this 非彼处 this,需要把 this 绑定下,如方法一;

当然也可以用 low 点方法,如方法二

方法一 推荐

  mounted() {
    window.addEventListener("popstate", function(e) {
      this.designOpen = false
    }.bind(this), false);
  }

 

方法二

  mounted() {
    let that = this
    // 按返回键时监听模态框是否显示,若显示则关闭
    window.addEventListener("popstate", function(e) {
      that.designOpen = false
    }, false);
  }

感谢群友 sum small 和 万总两位前端大佬的指点

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0