vue在浏览器监听切出当前页面（或切屏）,触发警告

最新推荐文章于 2025-07-09 09:15:39 发布

原创最新推荐文章于 2025-07-09 09:15:39 发布 · 3.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

该博客内容涉及Vue.js组件的生命周期，具体讨论了在组件挂载和销毁时如何监听页面可见性变化。通过`mounted`和`destroyed`钩子函数添加和移除`visibilitychange`事件监听器，实现当用户进入或离开页面时的日志记录，提供了一种跟踪用户页面活动的方法。

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    console.log('mounted')
    document.addEventListener('visibilitychange', this.monitor)
  },
  destroyed() {
    console.log('destroyed')
    document.removeEventListener('visibilitychange', this.monitor)
  },
  methods: {
    monitor(e: any) {
      let isExist = e.target.visibilityState
      console.log(isExist)
      if (isExist === 'visible') {
        console.log(new Date().toLocaleString(), `您已进入页面！`)
      } else {
        console.log(new Date().toLocaleString(), `您已离开页面！`)
      }
    },
  }
}
</script>
<style scoped>

</style>