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>
例子