Menu: add popper-append-to-body for SubMenu (ElemeFE#10515)

Author: Leopoldthecoder

examples/docs/en-US/menu.md

@@ -336,6 +336,7 @@ Vertical NavMenu could be collapsed.
 | show-timeout | timeout before showing a sub-menu | number | — | 300 |
 | hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
 | disabled | whether the sub-menu is disabled | boolean | — | false |
+| popper-append-to-body | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | - | level one Submenu: true / other Submenus: false |
 
 ### Menu-Item Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/es/menu.md

@@ -338,6 +338,7 @@ NavMenu vertical puede ser colapsado.
 | show-timeout | tiempo de espera antes de mostrar un submenú | number | —                 | 300         |
 | hide-timeout | tiempo de espera antes de ocultar un submenú | number | —                 | 300         |
 | disabled | si esta `disabled` el sub-menu | boolean | — | false |
+| popper-append-to-body | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | - | level one Submenu: true / other Submenus: false |
 
 ### Atributos Menu-Item 
 | Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |

examples/docs/zh-CN/menu.md

@@ -332,6 +332,7 @@
 | show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
 | hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
 | disabled  | 是否禁用 | boolean | — | false |
+| popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false |
 
 ### Menu-Item Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

packages/menu/src/submenu.vue

@@ -43,15 +43,20 @@
         default: 300
       },
       popperClass: String,
-      disabled: Boolean
+      disabled: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: undefined
+      }
     },
 
     data() {
       return {
         popperJS: null,
         timeout: null,
         items: {},
-        submenus: {}
+        submenus: {},
+        mouseInChild: false
       };
     },
     watch: {
@@ -66,7 +71,9 @@
     computed: {
       // popper option
       appendToBody() {
-        return this.isFirstLevel;
+        return this.popperAppendToBody === undefined
+          ? this.isFirstLevel
+          : this.popperAppendToBody;
       },
       menuTransitionName() {
         return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
@@ -180,6 +187,7 @@
         ) {
           return;
         }
+        this.dispatch('ElSubmenu', 'mouse-enter-child');
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.rootMenu.openMenu(this.index, this.indexPath);
@@ -193,9 +201,10 @@
         ) {
           return;
         }
+        this.dispatch('ElSubmenu', 'mouse-leave-child');
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
-          this.rootMenu.closeMenu(this.index);
+          !this.mouseInChild && this.rootMenu.closeMenu(this.index);
         }, this.hideTimeout);
       },
       handleTitleMouseenter() {
@@ -223,6 +232,14 @@
       this.parentMenu.addSubmenu(this);
       this.rootMenu.addSubmenu(this);
       this.$on('toggle-collapse', this.handleCollapseToggle);
+      this.$on('mouse-enter-child', () => {
+        this.mouseInChild = true;
+        clearTimeout(this.timeout);
+      });
+      this.$on('mouse-leave-child', () => {
+        this.mouseInChild = false;
+        clearTimeout(this.timeout);
+      });
     },
     mounted() {
       this.initPopper();

packages/theme-chalk/src/menu.scss

@@ -190,6 +190,7 @@
     }
     &-right-start {
       margin-left: 5px;
+      margin-right: 5px;
     }
   }
 }

types/submenu.d.ts

@@ -8,6 +8,18 @@ export declare class ElSubmenu extends ElementUIComponent {
   /** Delay time before show a sub-menu */
   showTimeout: number
 
-  /** Delay time before hide a sub-menu */
+  /** Delay time before showing a sub-menu */
+  showTimeout: number
+
+  /** Delay time before hiding a sub-menu */
   hideTimeout: number
+
+  /** Custom class name for the popup menu */
+  popperClass: string
+
+  /** Whether the sub-menu is disabled */
+  disabled: boolean
+
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
 }