Vue3-ContextMenu

自定义菜单-vue3组件

特性

1. 默认封装成Vue指令
2. 支持自定义样式
3. 支持子菜单
4. 支持加入菜单图标
5. 支持移动端长按唤出菜单(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 | 关闭菜单 | - |

1. 函数方式使用

<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.组件式使用