--- theme: condensed-night-purple --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。高效实现需求，避免重复造轮子。今天给大家分享的是，如何在最短的时候内实现右键菜单。方法也很简单，一个插件就可以搞定，话不多说，上效果图： ### 效果图 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc76b745c9c04f449e6a5c668a2d7055~tplv-k3u1fbpfcp-watermark.image?) ### 安装 ``` npm install vue-contextmenujs ``` 或 ``` yarn add vue-contextmenujs ``` ## CDN ``` ``` 菜单选项都在`items`数组里面，可根据需要自行配置。这时候点击右键，菜单弹窗就神奇地出现了，是不是很简单! ### 自定义样式打开控制台，查看元素即可查看到菜单的各个 class 名称。最外层的 class 为上面的`customClass`属性设置的值，样式可根据需求自行调整。 ``` ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca3c62b8650b465088da89e63ae6447c~tplv-k3u1fbpfcp-watermark.image?) ### 总结以上就基本使用方法，是不是比自己封装节省了大把时间。注意菜单会在点击左键或者滚轮滚动时自动销毁，同时也可调用`this.$contextmenu.destroy()`在其他场景自行销毁。以下是插件的参数配置： #### 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[]` | — | — | 欢迎在评论区留言，掘金官方将在[掘力星计划](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")活动结束后，在评论区抽送100份掘金周边。如果文章对你有所帮助，不要忘了点个赞~ 听说点赞的人今年人品爆发，年终奖翻倍🤩 Demo地址：https://github.com/frontend-afei/vue-contextmenujs-demo