GitHub-Laziji/ menujs
About the developer
139 Stars 
23 Forks 
MIT License 
59 Commits 
10 Opened issues 
Description
Vue 原生实现右键菜单组件, 零依赖
Services available
Contributors list
Vue Contextmenu
Vue 原生实现右键菜单组件, 零依赖
在线演示
快速安装
npm 安装
npm install vue-contextmenujs
或
yarn add vue-contextmenujs
CDN
自定义样式
/* custom */
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
background: #ffecf2 !important;
color: #ff4050 !important;
}
/* antd */
.antd-theme.menu {
border-radius: 2px !important;
}
.antd-theme .menu_item {
color: #000000d9 !important;
}
.antd-theme .menu_item__available:hover {
background: #f5f5f5 !important;
}
.antd-theme .menu_item_expand {
font-weight: 600 !important;
background-color: #e6f7ff !important;
}
/* material */
.material-theme.menu {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
}
.material-theme .menu_item {
color: #000000de !important;
}
.material-theme .menu_item__available:hover,
.material-theme .menu_item_expand {
background: rgba(0, 0, 0, 0.04) !important;
}
参数说明
MenuOptions
| 属性 | 描述 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | items | 菜单结构信息 |
MenuItemOptions[]| — | — | | event | 鼠标事件信息 |
Event| — | — | | x | 菜单显示X坐标, 存在
event则失效 |
number| — |
0| | y | 菜单显示Y坐标, 存在
event则失效 |
number| — |
0| | zIndex | 菜单样式
z-index|
number| — |
2| | customClass | 自定义菜单class |
string| — | — | | minWidth | 主菜单最小宽度 |
number| — |
150|
MenuItemOptions
| 属性 | 描述 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | label | 菜单项名称 |
string| — | — | | icon | 菜单项图标, 生成
元素 |
string| — | — | | disabled | 是否禁用菜单项 |
boolean| — |
false| | divided | 是否显示分割线 |
boolean| — |
false| | customClass | 自定义子菜单class |
string| — | — | | minWidth | 子菜单最小宽度 |
number| — |
150| | onClick | 菜单项点击事件 |
Function()| — | — | | children | 子菜单结构信息 |
MenuItemOptions[]| — | — |