@ug666/react 文档演示

ContextMenu 右键菜单

ContextMenu 监听 contextmenu 事件，在鼠标右键位置展开浮层菜单，点击外部或按 ESC 关闭。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
} from '@ug666/react'

基础右键菜单

在虚线框区域内右键，展开包含复制、粘贴与删除的操作菜单。

右键此处打开菜单

文件操作场景

模拟文件卡片右键菜单，提供重命名、移动、下载与删除操作。

设计稿 v3.fig

右键查看操作

代码示例

将 ContextMenuTrigger 包裹目标区域，在 ContextMenuContent 中放置菜单项。

import { Copy, Clipboard, Trash2 } from 'lucide-react'
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@ug666/react'

export function FileCard() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <div className="rounded-xl border border-dashed border-border-strong p-10 text-center text-sm text-text-secondary">
          右键此处打开菜单
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onClick={() => console.log('复制')}>
          <Copy size={14} className="mr-2 inline" />复制
        </ContextMenuItem>
        <ContextMenuItem onClick={() => console.log('粘贴')}>
          <Clipboard size={14} className="mr-2 inline" />粘贴
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem destructive onClick={() => console.log('删除')}>
          <Trash2 size={14} className="mr-2 inline" />删除
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Props 说明

属性	类型	默认值	说明
ContextMenuTrigger	ReactNode	—	右键触发区域包裹元素，监听 contextmenu 事件。
ContextMenuContent	ReactNode	—	菜单面板，通过 Portal 渲染到 body，fixed 定位到鼠标位置。
ContextMenuItem.destructive	boolean	false	使用红色危险操作样式。
ContextMenuItem.onClick	(e: MouseEvent) => void	—	菜单项点击回调，触发后自动关闭菜单。
ContextMenuSeparator	—	—	水平分隔线，用于区分操作分组。