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