bacaElemen
Membaca elemen DOM dari ref, getter, elemen, atau instance komponen.
Terbaca: —
Tiga bentuk masukan, satu hasil — itu gunanya bacaElemen.
Membaca sebuah elemen DOM dari bentuk apa pun yang wajar dikirim orang.
Targetnya boleh datang dalam empat bentuk: elemennya langsung, ref ke elemen, ref ke instance komponen, atau getter yang mengembalikan salah satunya.
toValue() sudah menyelesaikan ref dan getter sekaligus, jadi yang tersisa untuk ditangani di sini cuma satu: instance komponen, yang menyimpan elemen akarnya di $el. Menyerahkan useTemplateRef() yang menunjuk komponen — bukan elemen — adalah kesalahan paling sering terjadi, dan tanpa penanganan ini pendengarnya diam-diam terpasang di objek yang tidak punya addEventListener.
Pemasangan
npx shadcn-vue@latest add @kliping/target Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Tanpa dependensi — tidak ada berkas lain yang ikut terpasang.
Salin kode berikut ke project Anda.
import { toValue } from 'vue'
import type { ComponentPublicInstance, MaybeRefOrGetter } from 'vue'
export type ElemenTarget = HTMLElement | SVGElement | Element | Window | Document
export type MungkinElemen =
| ElemenTarget
| ComponentPublicInstance
| null
| undefined
/** Elemen, instance komponen, `ref` ke salah satunya, atau getter yang mengembalikannya. */
export type TargetElemen = MaybeRefOrGetter<MungkinElemen>
export function bacaElemen(target?: TargetElemen): ElemenTarget | undefined {
const nilai = toValue(target)
if (nilai == null)
return undefined
// Instance komponen menyimpan elemen akarnya di `$el`. Elemen biasa, `window`,
// dan `document` tidak punya properti itu, jadi keduanya lewat apa adanya.
const elemen = (nilai as ComponentPublicInstance).$el ?? nilai
return (elemen as ElemenTarget | null) ?? undefined
}API
export type ElemenTarget = HTMLElement | SVGElement | Element | Window | Document
export type MungkinElemen =
| ElemenTarget
| ComponentPublicInstance
| null
| undefined
export type TargetElemen = MaybeRefOrGetter<MungkinElemen>
export function bacaElemen(target?: TargetElemen): ElemenTarget | undefined {
const nilai = toValue(target)
if (nilai == null)
return undefined