useDocumentVisibility

基础用法

页面可见性：visible（可见）

切换到其他标签页再切回来即可看到变化

查看代码

<template>
    <div style="padding: 16px; background: #fafafa; border-radius: 8px">
        页面可见性：<b>{{ isVisible ? "visible（可见）" : "hidden（隐藏）" }}</b>
        <div style="margin-top: 8px; font-size: 13px; color: #888">切换到其他标签页再切回来即可看到变化</div>
    </div>
</template>

<script setup lang="ts">
import { useDocumentVisibility } from "@a-drowned-fish/rox-v";

const isVisible = useDocumentVisibility();
</script>

签名

function useDocumentVisibility(options?: {
    window?: Window;
    initialValue?: "visible" | "hidden" | "prerender";
}): Readonly<Ref<"visible" | "hidden" | "prerender">>;

参数

参数	说明	默认值
window	自定义 window 对象（SSR 友好）	globalThis.window
initialValue	初始可见性	"visible"

返回值

只读的 Ref<DocumentVisibilityState>，值为 "visible" \| "hidden" \| "prerender"。

组合示例

import { useDocumentVisibility } from "@a-drowned-fish/rox-v";

const visible = useDocumentVisibility();
watch(visible, (v) => {
    if (v === "visible") resume();
    else pause();
});