DevCloudFE · kagol · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
diff --git a/packages/devui-vue/devui/menu/index.ts b/packages/devui-vue/devui/menu/index.ts
@@ -8,7 +8,7 @@ export { Menu,SubMenu,MenuItem };
 export default {
   title: 'Menu 菜单',
   category: '布局',
-  status: "90%", // TODO: 组件若开发完成则填入"100%"，并删除该注释
+  status: "60%", // TODO: 组件若开发完成则填入"100%"，并删除该注释
   install(app: App): void {
     app.component(Menu.name, Menu);
     app.component(MenuItem.name, MenuItem);

diff --git a/packages/devui-vue/devui/menu/src/composables/layer-composables.ts b/packages/devui-vue/devui/menu/src/composables/layer-composables.ts
@@ -85,7 +85,6 @@ export function changeKey(ele: HTMLElement,event: clickEvent): void{
       break;
     }
   }
-  debugger;
   while (stack.length){
     const shiftItem = stack.shift();
     if (shiftItem?.tagName === 'UL' ||

diff --git a/packages/devui-vue/devui/menu/src/menu.scss b/packages/devui-vue/devui/menu/src/menu.scss
@@ -5,7 +5,7 @@ $devui-menu-item-margin: 10px;
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 300ms ease;
+  transition: opacity $devui-animation-duration-slow $devui-animation-ease-in-smooth;
 }
 
 .fade-leave-to {
@@ -74,7 +74,7 @@ $devui-menu-item-margin: 10px;
   }
 
   ::after {
-    transition: all 200ms $devui-animation-ease-in-out-smooth;
+    transition: all 200ms $devui-animation-ease-in-smooth;
     background: transparent;
   }
 
@@ -135,7 +135,7 @@ $devui-menu-item-margin: 10px;
     }
 
     .devui-menu-item-horizontal-wrapper {
-      transition: all 0.8s ease-in-out;
+      transition: all 0.8s $devui-animation-ease-in-smooth;
       position: absolute;
       margin-top: 10px;
       padding: 0 !important;
@@ -178,17 +178,17 @@ $devui-menu-item-margin: 10px;
 
 .devui-menu-vertical {
   padding: 0;
-  transition: width 0.5s ease, padding 0.5s ease;
+  transition: width 0.5s $devui-animation-ease-in-smooth, padding 0.5s $devui-animation-ease-in-smooth;
   border-right: $devui-line 1px solid;
   background: $devui-area !important;
 
   li,
   ul {
-    transition: height 800ms ease, max-height 400ms ease;
+    transition: height $devui-animation-duration-slow $devui-animation-ease-in-smooth, max-height $devui-animation-duration-slow $devui-animation-ease-in-smooth;
   }
 
   ::after {
-    transition: all 300ms ease-in-out;
+    transition: all $devui-animation-duration-slow $devui-animation-ease-in-smooth;
     background: transparent;
   }
 
@@ -338,9 +338,6 @@ $devui-menu-item-margin: 10px;
 
     li {
       height: 0;
-      opacity: 0;
-      visibility: hidden;
-      overflow-y: hidden;
     }
 
     ul {
@@ -395,7 +392,7 @@ $devui-menu-item-margin: 10px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        transition: all 0.5s ease;
+        transition: all 0.5s $devui-animation-ease-in-smooth;
         color: $devui-menu-item-sub;
       }
     }

diff --git a/packages/devui-vue/docs/components/menu/index.md b/packages/devui-vue/docs/components/menu/index.md
@@ -36,6 +36,28 @@ Menu 组件通常用于导航.
 
 :::
 
+### 自定义图标
+
+有时我们需要为子菜单或菜单项定义一些图标，此时我们可以使用```icon```插槽来为菜单定义icon。同时我们也可以使用css来对插槽进行定制化的修改.
+
+:::demo
+```vue
+<template>
+  <d-menu mode="horizontal">
+    <d-menu-item key="home">
+      <template #icon>
+        <i class="icon-homepage"></i>
+      </template>
+      主页
+    </d-menu-item>
+    <d-menu-item key="classes">
+      课程
+    </d-menu-item>
+  </d-menu>
+</template>
+```
+:::
+
 ### 垂直菜单
 
 垂直菜单一般在后台中较为广泛使用，子菜单可以嵌入菜单中
@@ -149,6 +171,8 @@ const changeCollapsed = () => {
 
 ### 取消多选
 
+取消多选功能仅能使用在允许多选的菜单中，菜单项将会在取消多选时触发`deselect`事件。
+
 :::demo
 
 ```vue
@@ -221,8 +245,6 @@ const changeDisabled = () => {
 
 :::
 
-## d-menu
-
 ### d-menu 参数
 
 | 参数                | 类型       | 默认       | 说明                       | 跳转 Demo                 | 全局配置项 |
@@ -244,7 +266,7 @@ const changeDisabled = () => {
 | dselect        | ```(e: {type: 'dselect', el: HTMLElement})=>void```                        | 取消选中时触发该事件，如果菜单不是多选菜单不会被触发 |           |
 | submenu-change | ```(e: {type: 'submenu-change': el: HTMLElement: state: boolean})=>void``` | 子菜单状态被更改时会触发                             |
 
-## d-menu-item 
+### d-menu-item 
 
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
@@ -253,14 +275,28 @@ const changeDisabled = () => {
 |key|string|''|菜单项的key值，需唯一|||
 |href|string|''|单击菜单项后跳转的页面|[基本用法](#基本用法)|
 
-## d-sub-menu
+### d-sub-menu
+
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
 | :----: | :----: | :----: | :----: | :---------: | ---------- |
 |title|String|''|子菜单标题|||
 |disable|boolean|false|是否禁用子菜单|||
 
-## 接口及其定义
+### d-menu-item 插槽
+
+| 插槽名 | 说明 |
+| :---: | :--: |
+|icon|用于定义菜单项的icon|
+
+### d-sub-menu 插槽
+
+| 插槽名 | 说明 |
+| :---: |:---:|
+|icon|用于定义子菜单标题的icon|
+
+### 接口及其定义
 
 ``` typescript
 export type menuMode = 'vertical' | 'horizontal';
 ```
+
diff --git a/packages/devui-vue/docs/en-US/components/menu/index.md b/packages/devui-vue/docs/en-US/components/menu/index.md
@@ -32,6 +32,28 @@ When it comes to packing, arranging, and displaying a range of options.
 
 :::
 
+### custom icons.
+
+Sometimes we need declare icon for submenu or menu item. That we can use ```icon``` slot to declare icon of sub menu or menu item. At the same time, we can use ```css`` to make to make customized modifications for slot
+
+:::demo
+```vue
+<template>
+  <d-menu mode="horizontal">
+    <d-menu-item key="home">
+      <template #icon>
+        <i class="icon-homepage"></i>
+      </template>
+      主页
+    </d-menu-item>
+    <d-menu-item key="classes">
+      课程
+    </d-menu-item>
+  </d-menu>
+</template>
+```
+:::
+
 ### vertical Menu
 
 vertical menu usually used in back-end. sub-menu can Embed in a menu
@@ -219,9 +241,7 @@ const changeDisabled = () => {
 
 :::
 
-## d-menu
-
-### d-menu 参数
+### d-menu arguments
 
 | argument            | type       | default value | introduce| Demo| global config |
 | --- | --- | --- | --- | --- | --- |
@@ -234,30 +254,42 @@ const changeDisabled = () => {
 | open-keys           | Array      | []            | default open sub menu's key                     | [default open](#default open)         |               |
 | default-select-keys | Array      | []            | default select menu item's key                  | /                                     |               |
 
-### d-menu 事件
+### d-menu event
 
 | event| type|introduce| Demo |
 | :---: | :---: | :---: | :---: | :---: | :---: |
 | select         | `(e: {type:'select', el: HTMLElement})=>void`                          | select menu item will emit this event. if is disabled can't emit this event                      |
 | dselect        | `(e: {type: 'dselect', el: HTMLElement})=>void`                        | The event is triggered when unchecked, if the menu is not multi-select the menu is not triggered |      |
 | submenu-change | `(e: {type: 'submenu-change': el: HTMLElement: state: boolean})=>void` | Triggered when the submenu state is changed                                                      |
 
-## d-menu-item
+### d-menu-item arguments
 
 | argument            | type       | default value | introduce| Demo| global config |
 | :---: | :---: | :---: | --- | --- | :---: |
 | disable | boolean | false |        Disabled this menu item.        |                       |            |
 |   key   | string  |  ''   |    menu item's key. Must is unique     |                       |            |
 |  href   | string  |  ''   | click menu item will link to page url. | [基本用法](#基本用法) |
 
-## d-sub-menu
+### d-sub-menu event
 
 | event| type|introduce| Demo |
 | :---: | :---: | :---: | :---: | :---: | :---: |
 |  title  | String  |  ''   | sub menu's title  |           |            |
 | disable | boolean | false | disabled sub menu |           |            |
 
-## Interface & declare
+### d-menu-item slot
+
+| slot name | description |
+| :---: | :--: |
+|icon|declare menu item icon|
+
+### d-sub-menu slot
+
+| slot name | description |
+| :---: |:---:|
+|icon|declare sub menu icon|
+
+### Interface & declare
 
 ```typescript
 export type menuMode = 'vertical' | 'horizontal';