vue3+ts监听页面无操作20s后跳转首页

在 Vue3 中结合 TypeScript，我们可以使用 ` IntersectionObserver API ` 和 `beforeRouteLeave` 生命周期钩子来监听页面无操作情况。以下是基本步骤：

1. 首先，导入Vue的响应式系统以及 TypeScript 的 `ref` 和 `watchEffect`：

import { ref, watchEffect } from "vue";

2. 创建一个布尔型的 `inactiveTimer` 变量，用于存储定时器 ID：

const inactiveTimerRef = ref(null);

3. 使用 `useIntersectionObserver` 模块或者自定义实现的 Intersection Observer 来检测元素是否在视窗内。例如，`vue-observe-visibility` 插件可以简化这个过程：

import { useIntersectionObserver } from "vue-observe-visibility";

const { observe, unobserve } = useIntersectionObserver();

4. 在 `beforeRouteLeave` 钩子中设置监听器，并在离开路由前清除它：

beforeRouteLeave(to, from, onRouteLeave) {
  // 开始观察页面是否有交互
  observe(() => {
    if (!this.$el.contains(document.activeElement)) {
      // 检查元素是否不再视窗口内，且超过20秒无操作
      if (inactiveTimerRef.value && Date.now() - inactiveTimerRef.value > 20 * 1000) {
        onRouteLeave(); // 跳转
      }
    } else {
      // 触发时重置计时器
      if (inactiveTimerRef.value) {
        clearTimeout(inactiveTimerRef.value);
        inactiveTimerRef.value = null;
      }
    }
  });
  
  // 离开时取消观察
  return () => {
    unobserve();
  };
},

5. 初始化定时器：

watchEffect(() => {
  if (!inactiveTimerRef.value) {
    inactiveTimerRef.value = setTimeout(() => {
      onRouteLeave(); // 超过20秒无操作，跳转
    }, 20000);
  }
});

以上代码会在页面失去焦点并且20秒内未进行任何交互时触发跳转。记得在组件卸载时关闭 `IntersectionObserver`，以防内存泄漏。