右键菜单组件有：vue-context-menu:、v-contextmenu:
这两种组件按照自己的需求进行选择
一、vue-context-menu
1、安装
npm install 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>