vue 右键弹出菜单

效果图

代码

这是项目里用到的，点击右键，弹出菜单，查询资料，找到vue-contextmenu

项目地址：https://github.com/chIIC/vue-contextmenu

 安装：

npm install vue-contextmenu --save

引入：

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

使用：

<template>
<div id="app" @contextmenu="showMenu"
    style="width: 100px;height: 100px;margin-top: 20px;background: red;">
    <vue-context-menu :contextMenuData="contextMenuData"
        @home="home"
        @deletedata="deletedata"></vue-context-menu>
</div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
    // 菜单数据
       contextMenuData: {
         menuName: 'demo',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'home', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '回到主页' //菜单名称
         }, {
             fnHandler: 'deletedata',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '删除布局'
         }]
       }
  },
  methods: {
    showMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
    homed () {
      alert("主页")
    },
    deletedata () {
      console.log('delete!')
    }
  }
}
</script>