js 关闭页面时弹框提醒

原创于 2021-03-19 16:58:36 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

js 专栏收录该内容

11 篇文章

订阅专栏

在Vue.js项目中，为具有编辑功能的详情页面添加关闭提醒。原本使用beforeRouteLeave配合window.confirm提示用户，但发现需要在直接关闭窗口时也进行提示。通过学习了解到可以使用window.addEventListener()来实现，注意在注销事件监听器时，第二个参数不能使用匿名函数，以避免遇到问题。

关闭页面时弹框提醒

在做vue项目时一个可编辑的详情页面需要在离开它的时候，根据页面是否改动的情况来判断是否要离开页面，一开始我只是在beforeRouteLeave里面调用的==window.confirm（）==来提示，

//调用
  beforeRouteLeave (to, form, next) {
    const isNext = this.isCanNextRoute() //这个是布尔值，来判断是否需要提示;
    console.log('isNext:', isNext)		 // true:不需要; false:需要;
    if (isNext) {
      next()
    } else {
      const isConfirm = window.confirm('您当前页面数据还没保存，确认要离开吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
        center: true
      })
      if (isConfirm) {
        next()
      }
    }
  },

这么做确实也简单，后面发现我理解错需求了，在关闭页面时也需要提示，于是去问了度娘得知了window.addEventListener()，需要搭配window.addEventListener()来注销它,第二个参数传的函数不能是匿名函数，这是我不小心踩得一个坑

  // 调用
  beforeRouteLeave (to, form, next) {
    const isNext = this.isCanNextRoute() //这个是布尔值，来判断是否需要提示;
    console.log('isNext:', isNext)		 // true:不需要; false:需要;
    if (isNext) {
      window.removeEventListener('beforeunload', this.demo, { passive: false })// 注销监听器
      next()
    } else {
      const isConfirm = window.confirm('您当前页面数据还没保存，确认要离开吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
        center: true
      })
      if (isConfirm) {
        window.removeEventListener('beforeunload', this.demo, { passive: false }) // 注销监听器
        next()
      }
    }
  },
  created () {
    window.addEventListener('beforeunload', this.demo, false)
  },
  methods: {
        demo (e) {
	      const isNext = this.isCanNextRoute()
	      console.log('isNext:', isNext)
	      if (!isNext) {
	        e.returnValue = 'demo'
	        return 'demo'
	      } else {  }
    },
  },
   destroyed () {
    window.removeEventListener('beforeunload', this.demo, { passive: false }) // 注销监听器
  }

用得比较浅，后面再看看