vue怎么实现右键二级菜单_给大家分享一个实现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

菜单1

菜单2

菜单3

菜单5

菜单4

不自动关闭1

不自动关闭2

右键点击此区域

export default {

name: 'Submenu',

props: {

theme: String,

},

methods: {

handleClick (vm, event) {

console.log(vm, event)

},

handleSubmenuShow (vm, placement) {

console.log(vm, placement)

},

},

}

.box {

width: 100%;

}

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