Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useHover
Apakah penunjuk sedang berada di atas sebuah elemen.
Arahkan penunjuk ke sini
mouseenter dan mouseleave, bukan mouseover dan mouseout — dua yang terakhir ikut menyala saat penunjuk berpindah antar anak di dalam elemen yang sama, dan hasilnya berkedip. Sama seperti sumbernya.
Pemasangan
npx shadcn-vue@latest add @kliping/use-hover Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: target, use-boolean, use-event-listener.
Salin dulu target, use-toggle, use-boolean, is-browser, use-event-listener — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
ts
import { useBoolean } from '@/composables/use-boolean'
import { useEventListener } from '@/composables/use-event-listener'
import type { TargetElemen } from '@/lib/target'
export interface UseHoverOptions {
onEnter?: () => void
onLeave?: () => void
onChange?: (sedangDiatas: boolean) => void
}
export function useHover(target: TargetElemen, options: UseHoverOptions = {}) {
const { onEnter, onLeave, onChange } = options
const { value, setTrue, setFalse } = useBoolean(false)
useEventListener('mouseenter', () => {
onEnter?.()
setTrue()
onChange?.(true)
}, { target })
useEventListener('mouseleave', () => {
onLeave?.()
setFalse()
onChange?.(false)
}, { target })
return value
}API
ts
export interface UseHoverOptions {
onEnter?: () => void
onLeave?: () => void
onChange?: (sedangDiatas: boolean) => void
}
export function useHover(target: TargetElemen, options: UseHoverOptions = {})