高效实现需求，避免重复造轮子，今天给大家分享的是，如何在最短的时间内实现右键菜单，方法也很简单，一个插件就可以搞定，话不多说，上效果图：
1. 效果图：
2. 安装：
npm install vue-contextmenujs
或
yarn add vue-contextmenujs
3. 引入：
在main.js中引入
import Contextmenu from “vue-contextmenujs”
Vue.use(Contextmenu);
4. 代码实现：
4.1 在需要实现自定义右键的元素上加上 @contextmenu.prevent=“onContextmenu”：
<div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"><div>右键</div>
</div>
4.2 在methods中添加方法：
// 鼠标右键事件onContextmenu(event) {this.$contextmenu({items: this.contextMenuData,event, // 鼠标事件信息customClass: 'custom-class', // 自定义菜单 classzIndex: 3, // 菜单样式 z-indexminWidth: 230 // 主菜单最小宽度});return false;},
4.3 contextMenuData 的数据如下：
data() {return {contextMenuData: [{label: "置顶会话",// 以element-ui图标为例实现右键菜单，图标会为被渲染为<i class="icon"></i>icon: "icon el-icon-top",onClick: () => {this.TopAddRowFun();},},{label: "删除会话",icon: "icon el-icon-delete",divided: true,onClick: () => {this.DeleteRowFun();},},],};},
contextMenuData 数据中，label 是文字，onClick 是绑定的点击事件，icon 是图标，我这里用的element-ui 的图标，可以把icon的值设置为 icon el-icon-edit。第一个参数必填，固定为icon，第二个参数就是element-ui 图标库里对应的类名，divided 是分割线，默认是 false。
