1.安装 

npm install vue-contextmenu --save

2.main.js引入

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

3.组件内使用

  <ul class="nav taskPanel">
          <li
            v-for="(item, index) in taskList"
            :key="item.id"
          ><task-card
              class="taskCard"
              :taskItem="item"
              @click.native="selectTaskClick(item,index)"
              :class="{active:selectTaskIndex===index}"
              @contextmenu.native="showMenu($event)"
            ></task-card>
          </li>
        </ul>
        <vue-context-menu
          :contextMenuData="contextMenuData"
          @modifyTask="modifyTask"
          style="background: #142957; box-shadow: 0 2px 2px 0 #0a43bc; border: 1px solid #00c5ff"
        ></vue-context-menu>

  // 菜单数据
      contextMenuData: {
        menuName: 'demo',
        // 菜单显示的位置
        axis: {
          x: null,
          y: null
        },
        // 菜单选项
        menulists: [{
          fnHandler: 'modifyTask', // 绑定事件
          icoName: 'icon iconfont icon-bianji2', // icon图标
          className: 'rightMentli',
          btnName: '修改业务名称' // 菜单名称
        }]
      },

 showMenu (e) {
      e.preventDefault()
      var x = e.clientX
      var y = e.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
modifyTask () {
}