使用Quasar，在鼠标事件时，显示列表

Question

我正在通过quasar框架做web开发。我想创建一个鼠标事件。我希望在鼠标经过事件时显示以下菜单，而不是鼠标单击事件。我制作了这个codepen作为参考，但我的代码在我的网站上不起作用。帮助。摘录自我的一些代码。我想知道的是vue3.0中的mouseover事件是如何工作的？

这是我的代码

<!-- html -->
<template>
  <q-btn
    label="MyBtnName"
    @mouseover="menuOver = true"
    @mouseleave="menuOver = false"
  >
    <q-menu v-model="menuOpen">
      <q-list>
        <q-item
          @mouseover="listOver = true"
          @mouseleave="listOver = false"
           >
          <q-item-section>
            {{ MyItems }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>

// script
import { ref } from 'vue';
import { debounce } from 'quasar';

export default {
  setup() {
    return {
      menuOpen: ref(false),
      menuOver: ref(false),
      listOver: ref(false),
    };
  },
  methods: {
    debounceFunc() {
      debounce(() => {
        this.checkMenu();
      }, 100);
    },
    checkMenu() {
      if (this.menuOver || this.listOver) {
        this.menuOpen = true;
      }
    },
  },
  watch: {
    mouseOver() {
      return this.debounceFunc();
    },
  },
};

Answer 1

看起来问题是，你试图向一个不接受这些事件的元素添加事件。根据Button | QBtn API上的quasar文档，您只能使用click-event。

为什么它在你的codepen中起作用？与q-btn不同的是，您在codepen中使用的div已经显示出来了。将呈现q-btn，因此所有未考虑的内容，如@mouseover="menuOver = true"，都将丢失。

简单的解决方案？只需构建您自己的按钮作为div或button元素，就像您已经在代码中所做的那样。