useDocumentVisibility
响应式追踪 document.visibilityState
演示
💡 最小化页面或切换标签页,然后返回
用法
vue
<script setup lang="ts">
import { useDocumentVisibility } from '@vueuse/core'
const visibility = useDocumentVisibility()
</script>
组件用法
此函数还通过
@vueuse/components
包提供了一个无渲染组件版本。了解更多用法。
vue
<template>
<UseDocumentVisibility v-slot="{ visibility }">
Document Visibility: {{ visibility }}
</UseDocumentVisibility>
</template>
类型声明
ts
/**
* Reactively track `document.visibilityState`.
*
* @see https://vueuse.org.cn/useDocumentVisibility
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useDocumentVisibility(
options?: ConfigurableDocument,
): ShallowRef<string, string>
export type UseDocumentVisibilityReturn = ReturnType<
typeof useDocumentVisibility
>