我正在尝试创建一个包含子菜单的菜单,将父菜单悬停在上方时,子菜单将打开。 仅当鼠标离开子菜单或父菜单时,子菜单才应关闭。问题是,当您将鼠标移到子菜单时,它会关闭。如果鼠标在打开的子菜单中,则无需关闭。
我尝试添加各种超时,并在子项上添加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);
}
}
在鼠标进入菜单时,我需要子菜单保持打开状态。