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.
Installation
pnpm dlx 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 { BasicTarget } from '@/lib/target'
export interface UseHoverOptions {
onEnter?: () => void
onLeave?: () => void
onChange?: (isHovering: boolean) => void
}
export function useHover(target: BasicTarget, 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?: (isHovering: boolean) => void
}
export function useHover(target: BasicTarget, options: UseHoverOptions = {})