菜单组件:vue3+hooks写法实现

83 阅读1分钟

今日小雪,来填上次的坑。juejin.cn/post/734902…

功能介绍

展开模式:支持左键、右键、长按

展开位置:支持指定 tl、tr、bl、br 和自动适配

声明周期:提供从创建前到卸载后的完整回调用于满足不同场景

演示地址

提供三种模式的触发演示

image.png

1611037570.3vhost.vip/

安装和使用

pnpm i

pnpm run dev

MenuAttributes

事件名说明类型默认值
list菜单列表array[]
model菜单展开模式enum [click、contextmenu、press]click
stopPropagation阻止冒泡事件booleantrue
preventDefault阻止默认事件booleantrue
beforeCreateFn菜单展开前的前置事件,可用于判断是否展开Function()=>true
beforeUnmountFn菜单展开前Function()=>true
position菜单展开的定位点,null 为自动适配enum [tl、tr、bl、br、null]null
style绑定菜单触发区域自定义样式object{}
menuContainerStyle绑定展开菜单容器自定义样式(非菜单列表)object{}
nameKey循环列表时展示名称的 keystringname
fnKey选择列表 item 触发回调方法的 keystringfn

MenuSlots

事件名说明
default触发菜单区域
menu展示菜单区域

MenuEmits

事件名说明类型
onBeforeCreate菜单展开前Function
onMounted菜单展开后Function
onSelected选中菜单元素时Function
onBeforeUnmount菜单关闭前Function
onUnmounted菜单关闭后Function

源码

<github.com/1611037570/…