Vue|Vue 1分钟实现右键菜单，懒人的福音！ Vue1分钟实现右键菜单，懒人的

高效实现需求，避免重复造轮子。今天给大家分享的是，如何在最短的时候内实现右键菜单。方法也很简单，一个插件就可以搞定，话不多说，上效果图：
效果图

文章图片

安装

npm install vue-contextmenujs

或

yarn add vue-contextmenujs

使用

import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu);

代码实现
以element-ui图标为例实现右键菜单，图标会为被渲染为，代码如下：

菜单选项都在items数组里面，可根据需要自行配置。这时候点击右键，菜单弹窗就神奇地出现了，是不是很简单!
自定义样式
打开控制台，查看元素即可查看到菜单的各个 class 名称。最外层的 class 为上面的customClass属性设置的值，样式可根据需求自行调整。

.custom-class .menu_item__available:hover, .custom-class .menu_item_expand { background: #ffecf2 !important; color: #ff4050 !important; }

文章图片

总结
以上就基本使用方法，是不是比自己封装节省了大把时间。注意菜单会在点击左键或者滚轮滚动时自动销毁，同时也可调用this.$contextmenu.destroy()在其他场景自行销毁。以下是插件的参数配置：
MenuOptions 菜单属性

MenuItemOptions 选项属性