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>

在线例子

例子