diff --git a/examples/docs/menu.md b/examples/docs/menu.md
index a3cecf83..8ea76b4a 100644
--- a/examples/docs/menu.md
+++ b/examples/docs/menu.md
@@ -1,88 +1,30 @@
@@ -108,240 +50,118 @@
}
-## 基础用法
+## NavMenu 导航菜单
-
-
-
Element
-
- 处理中心
- 我的工作台
- 订单管理
-
-
-
-
-
-
-
-
-
-
-
-
-
Element
-
- 处理中心
- 我的工作台
- 订单管理
-
-
-
-
-
-
-
-
-
-
-
-
-
Element
-
- 处理中心
- 我的工作台
- 订单管理
-
-
-
-
-
-
-
-
-
-
-
-
-
Element
-
- 处理中心
- 我的工作台
- 订单管理
-
-
-
-
-
-
-
-
-
-
-
-
-
Element
-
+
+
+ 带 icon
+
+
+
+ 不带 icon
+
+
+
+ 分组
+
-
-
-
Element
-
-
- 导航一
-
- 导航二
- 选项1
- 选项2
- 选项3
-
-
-
-
- 导航三
- 选项1
- 选项2
- 选项3
-
-
-
-
+
+
```
+:::
-
-
-
Element
-
- 导航一
-
- 导航二
-
- 选项1
- 选项2
-
-
- 选项3
- 选项4
-
-
-
- 导航三
- 选项1
- 选项2
- 选项3
-
-
- 导航四
- 选项1
- 选项2
- 选项3
-
-
- 导航五
- 选项1
- 选项2
- 选项3
-
-
-
-
-
Element
-
- 导航一
-
- 导航二
-
- 选项1
- 选项2
-
-
- 选项3
- 选项4
-
-
-
- 导航三
- 选项1
- 选项2
- 选项3
-
-
- 导航四
- 选项1
- 选项2
- 选项3
-
-
- 导航五
- 选项1
- 选项2
- 选项3
-
-
-
-```
-
-## menu API
+### Menu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | horizontal |
| theme | 主题色 | string | light,dark | light |
-| activeKey | 当前激活菜单的 key | string | | |
-| openedKeys | 当前打开的submenu的 key 数组 | Array | | |
-| uniqueOpend | 是否只保持一个子菜单的展开 | boolean | true, false | false |
-| router | 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 | boolean | true, false | false |
-| select | 菜单激活回调 | function(key, keyPath) | | |
-| open | SubMenu 展开的回调 | function(key, keyPath) | | |
-| close | SubMenu 收起的回调 | function(key, keyPath) | | |
+| default-active | 当前激活菜单的 key | string | — | — |
+| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
+| unique-opend | 是否只保持一个子菜单的展开 | boolean | — | false |
+| router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 key 作为 path 进行路由跳转 | boolean | — | false |
-## submenu API
+### Menu Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| select | 菜单激活回调 | key: 选中菜单项的 keyPath: 选中菜单项的 key path |
+| open | SubMenu 展开的回调 | key: 打开的 subMenu 的 key， keyPath: 打开的 subMenu 的 key path |
+| close | SubMenu 收起的回调 | key: 收起的 subMenu 的 key， keyPath: 收起的 subMenu 的 key path |
+
+### SubMenu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
-| key | 唯一标志 | string | | |
+| key | 唯一标志 | string | — | — |
-## menu-item API
+### Menu-Item Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
-| key | 唯一标志 | string | | |
+| key | 唯一标志 | string | — | — |
-## menu-group API
+### Menu-Group Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
-| title | 分组标题 | string | | |
+| title | 分组标题 | string | — | — |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index d0465dad..b9207604 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -199,6 +199,12 @@
{
"groupName": "Nav",
"list": [
+ {
+ "path": "/menu",
+ "name": "导航菜单 (menu)",
+ "title": "NavMenu 导航菜单",
+ "description": "富展现的标签页"
+ },
{
"path": "/tabs",
"name": "标签页 (tabs)",
diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css
index 7b5e7b0a..56127a30 100644
--- a/packages/theme-default/src/menu.css
+++ b/packages/theme-default/src/menu.css
@@ -4,11 +4,14 @@
@component-namespace el {
@b menu {
height: 60px;
+ border-radius: 2px;
line-height: 60px;
list-style: none;
position: relative;
margin: 0;
padding-left: 0;
+ background-color: #fff;
+ background-color: var(--menu-item-fill);
& li {
list-style: none;
@@ -38,6 +41,8 @@
}
}
@m dark {
+ background-color: var(--dark-menu-item-fill);
+
& .el-menu-item,
& .el-submenu__title {
color: #c0ccda;
@@ -81,8 +86,7 @@
color: var(--menu-item-color);
float: left;
height: 100%;
- padding: 0 10px;
- margin: 0 10px;
+ padding: 0 20px;
cursor: pointer;
position: relative;
transition: var(--md-fade-transition);
@@ -133,14 +137,14 @@
margin: 0;
top: 50%;
right: 20px;
- transform: rotateZ(180deg) translateY(-50%);
+ margin-top: -8px;
+ transform: rotateZ(180deg);
font-size: 12px;
- transition: transform .3s ease-in-out;
- transform-origin: center 0;
+ transition: transform .3s;
}
@when opened {
& .el-submenu__icon-arrow {
- transform: translateY(-50%);
+ transform: rotateZ(0);
}
}
}