diff --git a/packages/devui-vue/devui/menu/index.ts b/packages/devui-vue/devui/menu/index.ts
index 6be639dbe3..a578dc6a2f 100644
--- 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
index e1feac8a44..71e2cd00dc 100644
--- 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
index 07f5efc7b6..26c8775a9d 100644
--- 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
index 567fd84034..23543e4530 100644
--- 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
+
+
+
+
+
+
+ 主页
+
+
+ 课程
+
+
+
+```
+:::
+
### 垂直菜单
垂直菜单一般在后台中较为广泛使用,子菜单可以嵌入菜单中
@@ -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
index ca9ef03f60..9a5310d28d 100644
--- 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
+
+
+
+
+
+
+ 主页
+
+
+ 课程
+
+
+
+```
+:::
+
### 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,7 +254,7 @@ 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 |
| :---: | :---: | :---: | :---: | :---: | :---: |
@@ -242,7 +262,7 @@ const changeDisabled = () => {
| 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 |
| :---: | :---: | :---: | --- | --- | :---: |
@@ -250,14 +270,26 @@ const changeDisabled = () => {
| 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';