给大家分享一个实现vue右键菜单的组件。

百度的话会出现两个版本 一个是 vue-contextmenu 还有一个是v-contextmenu
这两个我都用了一下 确切的说我是先用的第一个但是 无法实现添加icon 的功能，所以又找到了第二个。
vue-contextmenu 添加icon需要使用到 font Awesome 但是引入后，修改无法实现icon 的效果，可能是我还不会用 这里我就直接附上链接啦
vue contextmenu

另一个是v contextmenu 这个的使用和功能都相对要比另一个更加全面一点。

cnpm i v-contextmenu -S
可以安装依赖
main.js 全局引用

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'

Vue.use(contentmenu)

Submenu.vue

<template>
  <div class="example">
    <v-contextmenu ref="contextmenu" :theme="theme">
      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>

      <v-contextmenu-item divider></v-contextmenu-item>

      <v-contextmenu-submenu @submenu-show="handleSubmenuShow" title="子菜单">
        <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>

        <v-contextmenu-item divider></v-contextmenu-item>

        <v-contextmenu-submenu title="子菜单">
          <v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
        </v-contextmenu-submenu>

        <v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>

        <v-contextmenu-item :auto-hide="false">不自动关闭1</v-contextmenu-item>
        <v-contextmenu-item :auto-hide="false">不自动关闭2</v-contextmenu-item>
      </v-contextmenu-submenu>
    </v-contextmenu>

    <div :class="['box', theme]" v-contextmenu:contextmenu>
      右键点击此区域
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Submenu',
    props: {
      theme: String,
    },
    methods: {
      handleClick (vm, event) {
        console.log(vm, event)
      },
      handleSubmenuShow (vm, placement) {
        console.log(vm, placement)
      },
    },
  }
</script>

<style scoped>
  .box {
    width: 100%;
  }
</style>

例子在github中都有提供，大家可以根据自己想要用的样式来自己选择