useDocumentVisibility

useDocumentVisibility 检测当前页面是否处于活动状态（即当前窗口的可见性）

基础用法

<template>
  <div>Hello World!</div>
</template>

<script setup lang="ts">
import { watchEffect } from "vue";
import { useDocumentVisibility } from "hooks-vue3";
const visibility = useDocumentVisibility();
watchEffect(() => {
  // 根据可见性状态执行不同的操作
  if (visibility.value === "hidden") {
    // 页面不可见
    console.log("页面不可见");
  } else {
    // 页面可见
    console.log("页面可见");
  }
});
</script>

API

const visibility = useDocumentVisibility();

参数

type VisibilityState = 'visible' | 'hidden' | 'prerender' | undefined;

function useDocumentVisibility(): Ref<VisibilityState>