使用Quasar实现鼠标事件触发展示列表，Vue3中mouseover事件如何使用？

现有代码问题 #

• 监听属性错误：watch配置项中监听的mouseOver不存在，你声明的响应式变量为menuOver、listOver，所以监听逻辑从未触发
• 防抖函数使用错误：Quasar的debounce工具需要预先创建防抖实例再调用，你当前写法每次调用都会生成新的防抖函数，防抖逻辑失效
• 逻辑闭环缺失：只处理了菜单打开的判断，没有处理鼠标完全离开按钮和菜单区域后的关闭逻辑
• q-menu配置缺失：默认q-menu是点击触发，需要添加persistent属性禁止点击关闭，覆盖默认触发行为

模板部分 #

<template>
  <q-btn
    label="MyBtnName"
    @mouseover="menuOver = true"
    @mouseleave="menuOver = false"
  >
    <q-menu 
      v-model="menuOpen" 
      persistent
      @mouseover="listOver = true"
      @mouseleave="listOver = false"
    >
      <q-list>
        <q-item v-for="(item, idx) in MyItems" :key="idx">
          <q-item-section>
            {{ item }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>

脚本部分（Vue3 组合式API写法，符合Vue3官方推荐规范） #

import { ref, watch } from 'vue';
import { debounce } from 'quasar';

export default {
  setup() {
    const menuOpen = ref(false);
    const menuOver = ref(false);
    const listOver = ref(false);
    // 示例菜单数据，可根据实际业务替换
    const MyItems = ref(['菜单选项1', '菜单选项2', '菜单选项3']);

    // 预创建防抖实例，避免频繁触发菜单显隐
    const checkMenu = debounce(() => {
      menuOpen.value = menuOver.value || listOver.value;
    }, 100);

    // 同时监听按钮和菜单的悬停状态变化
    watch([menuOver, listOver], () => {
      checkMenu();
    });

    return {
      menuOpen,
      menuOver,
      listOver,
      MyItems
    };
  }
};

• 触发时机：当鼠标指针移入绑定事件的元素或其任意子元素时触发，事件会向上冒泡
• 和mouseenter的区别：mouseenter仅在鼠标首次进入绑定元素本身时触发，不会冒泡，也不会因子元素移入重复触发；当前场景需要监听整个按钮+菜单区域的悬停状态，用mouseover+mouseleave组合适配性更高
• 绑定规则：和Vue2一致，用@mouseover绑定处理逻辑，可以直接赋值响应式变量，也可以调用方法，Vue3会自动把原生事件对象作为参数传入调用的方法

内容的提问来源于stack exchange，提问作者jinie kim