vue 模擬鼠標右鍵菜單

1. 安裝插件 github地址  https://github.com/ShengChangWei/e-vue-contextmenu 

npm i e-vue-contextmenu

 2. 在main.js 中全局 註冊組件， （也可以局部註冊）

import EVueContextmenu from 'e-vue-contextmenu'

Vue.use(EVueContextmenu)

 3. 在將要使用右鍵模擬菜單的元素上 添加事件

<div @contextmenu.stop.prevent="$refs.ctxshow.showMenu($event, data)">
      鼠標右鍵點擊
</div>

4. 在使用的頁面中  加入右鍵顯示菜單

<e-vue-contextmenu ref="ctxshow" id="contextStyle" @ctx-show="show" @ctx-hide="hide">
        <div @click="menu1">菜單1</div>
        <div @click="menu2">菜單2</div>
</e-vue-contextmenu>

5. 在 methods:{} 中添加 將要調用的方法

menu1() {
   this.$refs.ctxshow.hideMenu(); // 隱藏菜單
   console.log(this.menuData)
   // 實現邏輯.....

},
menu2() {
   this.$refs.ctxshow.hideMenu(); // 隱藏菜單
   console.log(this.menuData)
   // 實現邏輯....

}
show(data) {
   this.menuData = data
   console.log('菜單顯示了')
},
hide(data) {
   console.log('菜單隱藏了')
}