Vue3-ContextMenu
自定义菜单-vue3组件
特性
- 默认封装成Vue指令
- 支持自定义样式
- 支持子菜单
- 支持加入菜单图标
- 支持移动端长按唤出菜单(v1.7.0后支持)
配置
Props/指令Value (Object)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| el | 触发的Dom元素（以Vue组件方式或CustomMenu函数方式使用时必须传入） | - | - | - |
| menuWidth | 菜单宽度 | Number | - | 240 |
| menuList | 生成菜单项的数组，具体配置参考下表 | Array | - | - |
| appendToBody | 容器是否挂载到body上 | Boolean | - | true |
| injectCloseListener | 自动注入关闭菜单的Listener，设为false时需自行处理 | Boolean | - | true |
| pos | 菜单弹框位置 | Object: () => {x,y} | - |
menuList-菜单项数组配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 | - | - |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| 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.组件式使用