鼠标监听事件

Authors

Name
Elone Hoo
Me
@elonehoo

我们可以通过监听正确的事件来检测 Vue.js 中的鼠标悬停：

vue

<script setup lang="ts">
import { ref } from 'vue'

const hover = ref(false)
</script>
<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

然后我们可以使用这个状态来改变背景的呈现方式，就像在这里做的那样：

根据用例，我们可以检查 mouseout 和 mouseenter 事件。

它们冒泡以及与子元素交互的方式有一些微妙之处。