mirror of https://github.com/ElemeFE/element
86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# element-menu
|
||
> A element-menu component for Vue.js.
|
||
|
||
## Demo
|
||
http://element-component.github.io/element-menu
|
||
|
||
## Installation
|
||
```shell
|
||
npm i element-menu -D
|
||
```
|
||
|
||
## Usage
|
||
```javascript
|
||
import Vue from 'vue'
|
||
import ElMenu from 'element-menu'
|
||
import 'element-theme-default/dist/menu.css'
|
||
|
||
Vue.use(ElMenu)
|
||
```
|
||
|
||
or
|
||
|
||
```javascript
|
||
import Vue from 'vue'
|
||
import {
|
||
ElMenu,
|
||
ElMenuItem,
|
||
ElSubmenu,
|
||
ElMenuItemGroup
|
||
} from 'element-menu'
|
||
|
||
Vue.component('el-menu', ElMenu)
|
||
Vue.component('el-menu', ElMenuItem)
|
||
Vue.component('el-menu', ElSubmenu)
|
||
Vue.component('el-menu', ElMenuItemGroup)
|
||
```
|
||
|
||
|
||
### Menu Attribute
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| mode | 模式 | string | horizontal,vertical | vertical |
|
||
| theme | 主题色 | string | light,dark | light |
|
||
| default-active | 当前激活菜单的 index | string | — | — |
|
||
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
|
||
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
|
||
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover |
|
||
| router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
|
||
|
||
### Menu Events
|
||
| 事件名称 | 说明 | 回调参数 |
|
||
|---------- |-------- |---------- |
|
||
| select | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path |
|
||
| open | SubMenu 展开的回调 | index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path |
|
||
| close | SubMenu 收起的回调 | index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path |
|
||
|
||
### SubMenu Attribute
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| index | 唯一标志 | string | — | — |
|
||
|
||
### Menu-Item Attribute
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| index | 唯一标志 | string | — | — |
|
||
| route | Vue Router 路径对象 | Object | — | — |
|
||
|
||
### Menu-Group Attribute
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| title | 分组标题 | string | — | — |
|
||
|
||
## Development
|
||
```shell
|
||
make dev
|
||
|
||
## test
|
||
make test
|
||
|
||
## build
|
||
make build
|
||
```
|
||
|
||
# License
|
||
[MIT](https://opensource.org/licenses/MIT)
|