vue 鼠标右击出菜单事件

1、npm install vue-contextmenu --save
2、引入

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

3、代码：

<template>
  <div>
    <div style="width: 100px;height: 100px;margin-top: 20px;background: red;" @contextmenu="showMenu">
      <vue-context-menu :context-menu-data="contextMenuData" @home="home" @deletedata="deletedata"></vue-context-menu>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        contextMenuData: {
          menuName: '操作',
          //菜单显示的位置
          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,
        }
      },
      home() {
        alert('主页')
      },
      deletedata() {
        console.log('delete!')
      },
    },
  }
</script>

<style lang="scss" scoped></style>