右键弹出菜单组件 vue-context-menu

右键菜单组件有：vue-context-menu:、v-contextmenu:
这两种组件按照自己的需求进行选择

一、vue-context-menu

1、安装

npminstall vue-context-menu --save

2、引入

全局引入：项目入口文件 main.js
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

局部引入(如 user1.vue 文件)import VueContextMenu from 'vue-contextmenu'export default{
    components: { VueContextMenu }}

3、使用

<template><div><vue-context-menu :contextMenuData="contextMenuData" @fn="fn" @fn1="fn1"></vue-context-menu></div></template><script>export default{data(){return{
            contextMenuData: {
                menuName: '',
                axis: {
                    x: null,
                    y: null
                },
                menulists: [{
                        fnHandler: 'fn',
                        btnName: '点击此处调用 fn 函数'},
                    {
                        fnHandler: 'fn1',
                        btnName: '点击此处调用 fn1 函数'},
                ]}}},
    methods: {fn(){},
        fn1(){}}}</script>

二、v-contextmenu

1、安装

npm i -S v-contextmenu@next

或者 cdn 引入
<!-- 引入 VContextmenu 组件 --><script src="https://unpkg.com/v-contextmenu@next/dist/index.min.js"></script><!-- 引入 VContextmenu 组件样式 --><link rel="stylesheet"href="https://unpkg.com/v-contextmenu@next/dist/themes/default.css" />

2、引入

全局引入：入口文件 main.js
import contextmenu from 'v-contextmenu'import'v-contextmenu/dist/themes/default.css'
Vue.use(contextmenu)

局部引入：如在 user.vue 文件中引入
import{ directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';import'v-contextmenu/dist/themes/default.css'export default {
  directives: {
    contextmenu: directive,
  },

  components: {[Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }}

3、使用

<template><v-contextmenu ref="contextmenu"><v-contextmenu-item @click="clickF1">菜单1</v-contextmenu-item><v-contextmenu-item divider></v-contextmenu-item><v-contextmenu-item>菜单2</v-contextmenu-item><v-contextmenu-item divider></v-contextmenu-item><v-contextmenu-item>菜单3</v-contextmenu-item></v-contextmenu><div v-contextmenu:contextmenu>右键点击此区域</div></template><script>import{ directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';import'v-contextmenu/dist/themes/default.css'export default {
  directives: {
    contextmenu: directive,
  },

  components: {[Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  },

  methods: {clickF1(){}}}</script>