VueJS悬停菜单-防止在mouseleave上关闭菜单

Question

我正在尝试创建一个包含子菜单的菜单，将父菜单悬停在上方时，子菜单将打开。 仅当鼠标离开子菜单或父菜单时，子菜单才应关闭。问题是，当您将鼠标移到子菜单时，它会关闭。如果鼠标在打开的子菜单中，则无需关闭。

我尝试添加各种超时，并在子项上添加mouseenter事件以重新触发该事件。但是，当鼠标离开父级时，子级菜单关闭。

<li
    v-else
    :class="[{'has-sub-menu': item.child}, {'active': itemHover === true}]"
    v-on="disableHover && isCollapsed ? { click: mouseEnterEvent } : { mouseover: mouseEnterEvent }"
    @mouseout="mouseLeaveEvent"
  >
    <a :href="item.href">
      <div v-if="level == 1" class="icon-w">
        <div :class="item.icon"></div>
      </div>
      {{item.title}}
    </a>
    <div v-if="item.child" class="sub-menu-w">
      <div class="sub-menu-header">{{item.title}}</div>
      <div class="sub-menu-icon">
        <i :class="item.icon"></i>
      </div>
      <div class="sub-menu-i">
        <ul class="sub-menu">
          <sidebar-menu-item
            v-for="(subItem, index) in item.child"
            :key="index"
            :item="subItem"
            :level="level+1"
            :show-child="showChild"
            :rtl="rtl"
            :is-collapsed="isCollapsed"
          ></sidebar-menu-item>
        </ul>
      </div>
    </div>
  </li>

methods: {
    mouseEnterEvent(event) {
      setTimeout(() => {
        event.stopPropagation();
        this.itemHover = true;
        this.$emit("menu-active", { event, item: this.item });
      }, 0);
    },
    mouseLeaveEvent(event) {
        setTimeout(() => {
        event.stopPropagation();
        this.itemHover = false;
        this.$emit("menu-not-active", { event, item: this.item });
      }, 1000);
    }
  }

在鼠标进入菜单时，我需要子菜单保持打开状态。