vue3,监听鼠标移入移出

在 Vue3 中，监听元素的鼠标移入（mouseenter）和移出（mouseleave）事件通常使用 `@mouseenter` 和 `@mouseleave` 这样的修饰符来绑定自定义的方法。这是通过在组件模板或者指令中添加这样的处理：

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <!-- 元素内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);

function handleMouseEnter() {
  isActive.value = true;
  // 在这里执行鼠标进入时的操作
}

function handleMouseLeave() {
  isActive.value = false;
  // 在这里执行鼠标离开时的操作
}
</script>

在这个例子中，`isActive` 变量用于标记元素是否当前处于鼠标悬停状态。当鼠标移入时，`handleMouseEnter` 被调用并更新 `isActive` 的值；当鼠标移出时，`handleMouseLeave` 被调用。