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

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

一、vue-context-menu

1、安装

npm install vue-context-menu --save

2、引入

全局引入：项目入口文件 main.jsimport 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.jsimport 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>