vue实现右击菜单

用的是e-vue-contextmenu
简单使用，有更好的希望一起分享

1.安装

npm install --save e-vue-contextmenu@latest

2.全局注册组件

import Contextmenu from ‘e-vue-contextmenu’
Vue.use(Contextmenu)

3.在div中添加右击事件

@contextmenu.prevent=“rightClick($event,item.id,item.level)”

4.菜单栏

<e-vue-contextmenu
      ref="ctxshow"
      id="contextStyle"
      class="menu"
      @ctx-show="show" 
      @ctx-hide="hide"
    >
      <ul>
        <li @click="mouseClickDel()">删除</li>
        <li @click="mouseClickOpen()">打开</li>
        <li>复制</li>
      </ul>
    </e-vue-contextmenu>

5.methods

methods: {
    rightClick (e, id, level) {
    //接受div参数
      this.rightClickData = {id:id,level:level}
      this.$refs.ctxshow.showMenu(e)
    },
    hideMenu () {
      this.$refs.ctxshow.hideMenu(); // 隐藏菜单
    },
    mouseClickDel (data) {
      this.hideMenu()
      console.log('删除')
    },
    mouseClickOpen (data) {
      this.hideMenu()
      console.log('打开')
    },
    show(data) {
        console.log('显示菜单')
    },
    hide(data) {
        console.log('隐藏菜单')
    }
    }

6.样式

.menu ul {
  margin: 0px;
  padding: 0px;
  text-align: center;
  list-style-type: none;
}

.menu ul li {
  padding: 3px 0px;
  font-size: 12px;
}

.menu ul li:hover {
  background: #e1dddd;
}

.menu ul li a:link {
  color: #000;
  text-decoration: none;
}

7.效果图