- 默认封装成Vue指令
- 支持自定义样式
- 支持子菜单
- 支持加入菜单图标
- 支持移动端长按唤出菜单(v1.7.0后支持)
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
el | 触发的Dom元素(以Vue组件方式或CustomMenu函数方式使用时必须传入) | - | - | - |
menuWidth | 菜单宽度 | Number | - | 240 |
menuList | 生成菜单项的数组,具体配置参考下表 | Array | - | - |
appendToBody | 容器是否挂载到body上 | Boolean | - | true |
injectCloseListener | 自动注入关闭菜单的Listener,设为false时需自行处理 | Boolean | - | true |
pos | 菜单弹框位置 | Object: () => {x,y} | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fn | 点击菜单后执行的回调,回调参数1为用户传入的Params, 参数2为点击右键时所在的HtmlElement元素(使用document.elementFromPoint获取), 参数3为指令绑定的当前元素, 参数4为原生点击事件数据 | Function | - | - |
label | 菜单名, 可使用函数,回调参数同fn选项 | String, Function | - | - |
border | 菜单单项是否展示下划线分割 | Boolean | - | false |
icon | 菜单图标的类名(字体图标) | String | - | - |
hidden | 菜单项是否隐藏,可使用函数,回调参数同fn选项 | Boolean, Function | - | - |
disabled | 菜单项是否不可点击,可使用函数,回调参数同fn选项 | Boolean, Function | - | - |
children | 子菜单的菜单项数组(配置与此表一致,但目前仅支持二级菜单) | Array | - | - |
line | 是否为分割线,该值为True时,以上设置均失效 | Boolean | - | - |
customClass | 注入自定义类名到MenuItem上 | String | - | - |
方法名 | 说明 | 参数 |
---|---|---|
show | 显示菜单,一般不需要自行调用 | x:number,y:number |
close | 关闭菜单 | - |
- 函数方式使用
<script lang="ts" setup>
import { ref } from 'vue'
import { ContextMenu } from 'vue3-contextmenu'
const domRef = ref()
const showContextmenu = (event: any, song: any) => {
console.log(event, song)
ContextMenu({
el: domRef.value,
menuList: [
//具体的列表项
],
menuWidth: 240,//列表官渡
pos: {
x: event.pageX,
y: event.pageY
}
})
}
</script>
<template>
<div ref="dom" @contextmenu.prevent.stop="showContextmenu($event, item)">Dom</div>
</template>
2.组件式使用