Contextmenu-vue3 NPM

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

contextmenu vue3 vue 右击菜单右键菜单

@everything-registry/sub-chunk-1376

1.0.0

11 months ago