v-menu
Vue Menu component
Development
yarn
yarn start
Example
http://localhost:8000/example/default.html
Feature
- Support IE9+, Chrome, Firefox
Install
npm config set @cloud-sn:registry http://snpm.cnsuning.com
yarn add @cloud-sn/v-menu
Usage
import Vue from 'vue';
import VMenu, { VMenuItem, VMenuItemGroup, VSubMenu } from '@cloud-sn/v-menu';
API
VMenu
Props
| 参数名 |
描述 |
类型 |
默认 |
| theme |
主题 |
string |
light |
| mode |
菜单类型 , 支持水平 , 内嵌两种模式 |
horizontal | inline |
inline |
| inlineIndent |
inline 模式时菜单缩进宽度 |
24 |
|
| selectedKeys |
选中的菜单项, 与 name 属性关联 |
string[] |
|
| openKeys |
展开的 vSubMenu 项 ,name 属性关联 |
string[] |
|
| visible |
是否展示 |
boolean |
true |
| className |
类名 |
string |
'' |
| styles |
样式 |
string |
'' |
| uniqueOpened |
是否同时只展开一个菜单 |
boolean |
true |
Events
| 参数名 |
描述 |
类型 |
默认 |
| click |
点击 vMenuItem 触发 |
Function({name,item, eventPath,domevent}) |
|
| open-change |
vSubMenu 展开或关闭时触发 |
Function(openKeys:string[]) |
|
| deselect |
vMenuItem 取消选中时触发 |
Function(selectedKeys:string[]) |
|
| select |
vMenuItem 选中时触发 |
Functioin(selectedKeys:string[]) |
|
vMenuItem
Props
| 参数名 |
描述 |
类型 |
默认 |
| name |
唯一标识 |
String|Number |
'' |
| disabled |
是否禁用 |
Boolean |
false |
| styles |
样式 |
String |
'' |
| className |
类名 |
String |
'' |
Events
无
vSubMenu
Props
| 参数名 |
描述 |
类型 |
默认 |
| name |
唯一标识 |
String|Number |
'' |
| disabled |
是否禁用 |
Boolean |
false |
| styles |
样式 |
String |
'' |
| className |
类名 |
String |
'' |
Events
| 参数名 |
描述 |
类型 |
默认 |
| click |
点击 vSubMenu 时触发 |
Function({name, domevent}) |
|
vMenuItemGroup
Props
| 参数名 |
描述 |
类型 |
默认 |
| title |
分组标题 |
string |
'' |
| styles |
样式 |
string |
'' |
| className |
类名 |
string |
'' |
Events
无