feat: el-submenu add show-timeout,hide-timeout attributes (#8934)

* el-submenu add show-timeout,hide-timeout attributes

* el-submenu add show-timeout,hide-timeout attributes

* el-submenu add show-timeout,hide-timeout attributes

* add the definition for SubMenu

examples/docs/en-US/menu.md

@@ -63,7 +63,7 @@ Top bar NavMenu can be used in a variety of scenarios.
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
-  <el-submenu index="2">
+  <el-submenu index="2" show-timeout="10" hide-timeout="10">
     <template slot="title">Workspace</template>
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
@@ -305,6 +305,8 @@ Vertical NavMenu could be collapsed.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | unique identification   | string  | — | — |
+| show-timeout | Delay time before show a sub-menu | number | — | 300 |
+| hide-timeout | Delay time before hide a sub-menu | number | — | 300 |
 
 ### Menu-Item Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/es/menu.md

@@ -64,7 +64,7 @@ Top bar NavMenu puede ser usado en distinto escenarios.
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
-  <el-submenu index="2">
+  <el-submenu index="2" show-timeout="10" hide-timeout="10">
     <template slot="title">Workspace</template>
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
@@ -307,6 +307,8 @@ NavMenu vertical puede ser colapsado.
 | Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |
 | -------- | ------------------- | ------ | ----------------- | ----------- |
 | index    | identificador único | string | —                 | —           |
+| show-timeout | Tiempo de retardo antes de mostrar un sub-menu | number | — | 300 |
+| hide-timeout | Tiempo de retardo antes de ocultar un sub-menu | number | — | 300 |
 
 ### Atributos Menu-Item 
 | Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |

examples/docs/zh-CN/menu.md

@@ -64,7 +64,7 @@
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
-  <el-submenu index="2">
+  <el-submenu index="2" show-timeout="10" hide-timeout="10">
     <template slot="title">我的工作台</template>
     <el-menu-item index="2-1">选项1</el-menu-item>
     <el-menu-item index="2-2">选项2</el-menu-item>
@@ -301,6 +301,8 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | 唯一标志   | string  | — | — |
+| show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
+| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
 
 ### Menu-Item Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

packages/menu/src/submenu.vue

@@ -55,6 +55,14 @@
       index: {
         type: String,
         required: true
+      },
+      showTimeout: {
+        type: Number,
+        default: 300
+      },
+      hideTimeout: {
+        type: Number,
+        default: 300
       }
     },
 
@@ -156,7 +164,7 @@
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.rootMenu.openMenu(this.index, this.indexPath);
-        }, 300);
+        }, this.showTimeout);
       },
       handleMouseleave() {
         const {rootMenu} = this;
@@ -169,7 +177,7 @@
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.rootMenu.closeMenu(this.index);
-        }, 300);
+        }, this.hideTimeout);
       },
       handleTitleMouseenter() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;

types/submenu.d.ts

@@ -4,4 +4,10 @@ import { ElementUIComponent } from './component'
 export declare class ElSubmenu extends ElementUIComponent {
   /** Unique identification */
   index: string
+
+  /** Delay time before show a sub-menu */
+  showTimeout: number
+
+  /** Delay time before hide a sub-menu */
+  hideTimeout: number
 }