แม้ว่าฉันจะให้อัปเดตโดยใช้ API องค์ประกอบใหม่
ส่วนประกอบ
<template>
<div @mouseenter="hovering = true" @mouseleave="hovering = false">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
export default {
setup() {
const hoverRef = ref(false)
return { hovering }
}
})
</script>
ฟังก์ชันองค์ประกอบที่ใช้ซ้ำได้
การสร้างuseHoverฟังก์ชันจะช่วยให้คุณสามารถใช้ซ้ำในส่วนประกอบใด ๆ
export function useHover(target: Ref<HTMLElement | null>) {
const hovering = ref(false)
const enterHandler = () => (hovering.value = true)
const leaveHandler = () => (hovering.value = false)
onMounted(() => {
if (!target.value) return
target.value.addEventListener('mouseenter', enterHandler)
target.value.addEventListener('mouseleave', leaveHandler)
})
onUnmounted(() => {
if (!target.value) return
target.value.removeEventListener('mouseenter', enterHandler)
target.value.removeEventListener('mouseleave', leaveHandler)
})
return hovering
}
นี่คือตัวอย่างสั้น ๆ ที่เรียกใช้ฟังก์ชันภายในคอมโพเนนต์ Vue
<template>
<div ref="hoverRef">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
import { useHover } from './useHover'
export default {
setup() {
const hoverRef = ref(null)
const hovering = useHover(hoverRef)
return { hovering, hoverRef }
}
})
</script>
นอกจากนี้คุณยังสามารถใช้ห้องสมุดเช่นที่มาพร้อมกับฟังก์ชั่นที่มีประโยชน์มากมายรวมทั้ง@vuehooks/coreuseHover