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

avatar 2022年08月23日09:48:49 2 1691 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
  • 个人淘宝
  • 店铺名:言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

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