useIsMatchMedia
Apakah sebuah kueri media sedang cocok.
Lebar ≥ 768px: false
Tema gelap: false
Kurangi gerak: false
Kuerinya boleh reaktif — pendengarnya dipasang ulang kalau kuerinya berganti, dan yang lama dilepas lebih dulu.
false saat dirender di server. Itu berarti tata letak yang bergantung pada composable ini akan sempat menggambar keadaan "tidak cocok" sebelum diperbaiki di peramban. Untuk hal yang tidak boleh berkedip seperti itu, kueri media di CSS tetap jawaban yang lebih baik — composable ini untuk keputusan yang tidak bisa diambil CSS, misalnya memilih komponen mana yang dipasang.
Pemasangan
npx shadcn-vue@latest add @kliping/use-is-match-media Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: is-browser.
Salin dulu is-browser — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { getCurrentScope, onScopeDispose, readonly, ref, toValue, watch } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
import { isBrowser } from '@/lib/is-browser'
export function useIsMatchMedia(query: MaybeRefOrGetter<string>) {
const cocok = ref(false)
let lepas: (() => void) | undefined
const bongkar = () => {
lepas?.()
lepas = undefined
}
const berhentiPantau = watch(
() => toValue(query),
(kueri) => {
bongkar()
if (!isBrowser || typeof window.matchMedia !== 'function')
return
const daftar = window.matchMedia(kueri)
cocok.value = daftar.matches
const tangani = (peristiwa: MediaQueryListEvent) => {
cocok.value = peristiwa.matches
}
daftar.addEventListener('change', tangani)
lepas = () => daftar.removeEventListener('change', tangani)
},
{ immediate: true },
)
const berhenti = () => {
bongkar()
berhentiPantau()
}
if (getCurrentScope())
onScopeDispose(berhenti)
return readonly(cocok)
}API
export function useIsMatchMedia(query: MaybeRefOrGetter<string>)