# ive-contextmenu
# 一、代码示例
# html
<template>
<div>
<div
title="点击右键弹出菜单"
@contextmenu.prevent="contextmenu"
></div>
<ive-contextmenu
ref="menu"
:options="menuOptions"
@cancel="reset"
@close="reset"
/>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# js
export default {
data() {
return {
menuOptions: [
{
name: '选项一',
onClick: this.methods1,
},
{
name: '选项二',
onClick: this.methods2,
disabled: true,
},
...
],
}
},
methods: {
methods1(data) {
console.log(data);
},
contextmenu($event) {
this.$refs.menu.open($event, { test: 1 }, this.menuOptions);
},
reset() {
console.log('reset');
}
},
}
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
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
# 二、属性、事件及方法说明
# 属性（props）
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 右键菜单配置: [{ name: 菜单名, onClick: 回调函数(参数为this.$refs.menu.open调用时传入的第二个参数{ test: 1 } }, disabled: 是否禁用 }] | Array | 无（必填） |
# 事件（events）
| 事件名 | 说明 | 返回值 |
|---|---|---|
| cancel | 菜单关闭（当用户点击了页面其它位置） | 无 |
| close | 菜单关闭（当用户点击了某个菜单选项） | 无 |
# 方法（methods）
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| open | 打开菜单 | 1. $event：鼠标右键事件的目标对象（用于定位菜单） 2. data：数据（会作为menuOptions中的onClick函数的参数） 3. options：右键菜单配置（会覆盖在模板中传给ive-contextmenu的options属性） | 无 |