diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue index 7631128a4..342e6c045 100644 --- a/packages/menu/src/submenu.vue +++ b/packages/menu/src/submenu.vue @@ -196,8 +196,12 @@ this.timeout = setTimeout(() => { this.rootMenu.openMenu(this.index, this.indexPath); }, showTimeout); + + if (this.appendToBody) { + this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter')); + } }, - handleMouseleave() { + handleMouseleave(deepDispatch = false) { const {rootMenu} = this; if ( (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') || @@ -208,11 +212,14 @@ this.dispatch('ElSubmenu', 'mouse-leave-child'); clearTimeout(this.timeout); this.timeout = setTimeout(() => { - if (this.appendToBody) { - this.rootMenu.openedMenus = []; - } !this.mouseInChild && this.rootMenu.closeMenu(this.index); }, this.hideTimeout); + + if (this.appendToBody && deepDispatch) { + if (this.$parent.$options.name === 'ElSubmenu') { + this.$parent.handleMouseleave(true); + } + } }, handleTitleMouseenter() { if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return; @@ -279,7 +286,7 @@ v-show={opened} class={[`el-menu--${mode}`, popperClass]} on-mouseenter={($event) => this.handleMouseenter($event, 100)} - on-mouseleave={this.handleMouseleave} + on-mouseleave={() => this.handleMouseleave(true)} on-focus={($event) => this.handleMouseenter($event, 100)}>