vue2中实现右键菜单

vue2中实现右键菜单

效果图-右键菜单

1、安装

npm install vue-contextmenujs

yarn add vue-contextmenujs
1
2
3

• CDN

<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">
1

2、使用

2.1、引入

src/main.js

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
1
2

CDN引入则不需要Vue.use(Contextmenu)

2.2、代码

textMenu.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

引入

HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

自定义样式

打开控制台，查看元素即可查看到菜单的各个 class 名称。最外层的 class 为上面的customClass属性设置的值，样式可根据需求自行调整。

1
2
3
4
5
6
7

效果

• 注意

菜单会在点击左键或者滚轮滚动时自动销毁，同时也可调用this.$contextmenu.destroy()在其他场景自行销毁 。

3、插件的参数配置：

1、MenuOptions 菜单属性

2、MenuItemOptions 选项属性