React 右键菜单组件

使用

Demo

api

ContextMenu

| 属性 | 类型 | 描述 | | --- | --- | --- | | menu | MenuItem[][] | 菜单数据源 | | disabled | boolean | 是否禁用，禁用后无法打开右键菜单 | | onOpen | (e: React.MouseEvent) => void | 打开菜单时的回调 | | zIndex | number | 菜单悬浮的zIndex层级，默认911 | | onClick | (e: React.MouseEvent) => void | 菜单项点击的回调 |

createOverlay

| 属性 | 类型 | 描述 | | --- | --- | --- | | props | ExtraProps | 浮层配置 | | target | HTMLElement\string | 挂载额外内容的DOM元素 |

ExtraProps

| 属性 | 类型 | 描述 | | --- | --- | --- | | id | string | 浮层唯一标识，未给定将自动生成 | | style | React.CSSProperties | 浮层样式 | | content | JSX.Element | 浮层内显示的内容 | | onClose | () => void | 浮层关闭时的回调 | | closeOnClickMask | boolean | 点击浮层是否销毁浮层 |

Menu

| 属性 | 类型 | 描述 | | --- | --- | --- | | menu | MenuItem[][] | 菜单数据源 | | onMenuItemClick | (e: React.MouseEvent) => void | 菜单项点击的回调 |

MenuItem

| 属性 | 类型 | 描述 | | --- | --- | --- | | icon | JSX.Element | 菜单项icon图标 | | title | string | 菜单标题 | | onClick | (React.MouseEvent, {title: string, disabled: boolean}) => void | 菜单项点击后的回调 | | disabled | boolean | 是否禁用 | | className | string | 菜单项额外类名 |

效果