高效實現需求，避免重復造輪子，今天給大家分享的是，如何在最短的時間內實現右鍵菜單，方法也很簡單，一個插件就可以搞定，話不多說，上效果圖：
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。
