useDocumentVisibility
Apakah tab-nya sedang dilihat.
Keadaan: visible
Tab ditinggalkan 0 kali. Coba pindah tab lalu kembali.
Dipakai untuk berhenti bekerja saat tidak ada yang melihat: hentikan polling, jeda animasi, tunda muat ulang. Berpasangan rapi dengan useInterval, yang berhenti kalau jedanya null:
const terlihat = useDocumentVisibility()
useInterval(muatUlang, () => (terlihat.value === 'visible' ? 5000 : null))Nilainya visible saat dirender di server — bukan tebakan, melainkan satu- satunya jawaban yang membuat HTML server dan gambaran pertama di peramban cocok untuk tab yang memang sedang dibuka.
Pemasangan
npx shadcn-vue@latest add @kliping/use-document-visibility Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: is-browser, saat-terpasang, use-event-listener.
Salin dulu is-browser, saat-terpasang, target, use-event-listener — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { readonly, ref } from 'vue'
import { isBrowser } from '@/lib/is-browser'
import { saatTerpasang } from '@/lib/saat-terpasang'
import { useEventListener } from '@/composables/use-event-listener'
export function useDocumentVisibility() {
const keadaan = ref<DocumentVisibilityState>('visible')
const perbarui = () => {
if (isBrowser)
keadaan.value = document.visibilityState
}
saatTerpasang(perbarui)
useEventListener('visibilitychange', perbarui, {
target: isBrowser ? document : undefined,
passive: true,
})
return readonly(keadaan)
}API
export function useDocumentVisibility()