vue 右键探出菜单

插件名称

yarn add install vue-contextmenu --save

引入

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

在组件中使用

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

<script>
// @ is an alias to /src

export default {
    
    
  name: "Home",
  components: {
    
    },
  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: "删除布局",
          },
          {
    
    
            fnHandler: "deletedata",
            icoName: "fa fa-minus-square-o  fa-fw",
            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>
<style scoped></style>

效果：