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('菜单隐藏了')
}