Need help with menujs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

GitHub-Laziji
139 Stars 23 Forks MIT License 59 Commits 10 Opened issues

Description

Vue 原生实现右键菜单组件, 零依赖

Services available

!
?

Need anything else?

Contributors list

# 28,386
HTML
github-...
vant
Vue.js
59 commits

Vue Contextmenu

Vue 原生实现右键菜单组件, 零依赖

sample

在线演示

快速安装

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[]
| — | — |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.