useDocumentVisibility
document.visibilityState
をリアクティブに追跡します
デモ
💡 ページを最小化するか、タブを切り替えてから戻ってください
使用方法
js
import { useDocumentVisibility } from '@vueuse/core'
const visibility = useDocumentVisibility()
コンポーネントでの使用方法
この関数は、
@vueuse/components
パッケージを介してレンダーレスコンポーネントバージョンも提供します。 使用方法の詳細はこちら。
vue
<template>
<UseDocumentVisibility v-slot="{ visibility }">
Document Visibility: {{ visibility }}
</UseDocumentVisibility>
</template>
型宣言
typescript
/**
* Reactively track `document.visibilityState`.
*
* @see https://vueuse.dokyumento.jp/useDocumentVisibility
*/
export declare function useDocumentVisibility(
options?: ConfigurableDocument,
): Ref<DocumentVisibilityState>