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

无