popupMode.js 1.07 KB
// 【操作逻辑优化】当前页面内有弹窗时,返回应该是关闭弹窗,而不是返回上一页
function getSetLastItem(set) {
  console.log(set, 'set')
  return Array.from(set)[set.size - 1]
}
export default {
  data() {
    return {
      CURRENT_POPUP_STATUS_SET: new Set(),
    }
  },
  created() {
    this.$root.$on('TOGGLE_POPUP', (status) => {
      this.CURRENT_POPUP_STATUS_SET = status
    })
  },
  beforeRouteLeave(to, from, next){
    // 如何判断一个弹出层是否正在显示
    if (this.CURRENT_POPUP_STATUS_SET.size){
      //判断弹出层正在显示
      //将路由前进一步,在路由历史中,前进一步则是当前页面
      this.$router.go(1)
      // 一般认为,层叠的popup都是有序的,后边打开的的在上边,所以先关闭最上边的 popup
      // 通知组件 关闭set数组最后一个弹窗
      this.$root.$emit('CLOSE_POPUP', getSetLastItem(this.CURRENT_POPUP_STATUS_SET))
      return
    }
    //当弹出层处于隐藏状态时,点击返回则直接跳转页面,不做任何操作
    next()
  },
}