vueuse 中文文档

VueUse useDocumentVisibility Vue 检测当前网页是否可见

VueUse useDocumentVisibility 使 Vue 可以检测当前网页是否可见,和小程序的onShow事件功能类似,当你点击浏览器上其他选项卡时为不可见,在点击当前浏览器选卡时显示为可见。

代码示例

import { useDocumentVisibility } from '@vueuse/core'

//浏览器切换到其他选项卡 visibility 为 false,切换为当前网页时为 true
const visibility = useDocumentVisibility()

组件示例

需要安装@vueuse/components库,如果没安装请先安装。

npm i @vueuse/core @vueuse/components
<UseDocumentVisibility v-slot="{ visibility }">
  Document Visibility: {{ visibility }}
</UseDocumentVisibility>

在线例子

例子

Catalog
vueuse 入门 State 状态 Elements 元素 useActiveElement 焦点元素 useDocumentVisibility 是否可见 useDraggable 拖动元素 useDropZone 文件拖拽区 useElementBounding 获取元素边界 useElementSize 元素大小 useElementVisibility 元素是否可见 useIntersectionObserver 元素是否可见 useMouseInElement 鼠标hover事件 useMutationObserver 监视 DOM 变动 useParentElement 获取父元素 useResizeObserver 监控元素大小 useWindowFocus 窗口焦点状态 useWindowScroll 滚动条位置 useWindowSize 获取窗口大小 Browser 浏览器 Sensors 感应监测