React 组件

UGContextMenu 右键菜单

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import {
  UGContextMenu,
  UGContextMenuTrigger,
  UGContextMenuContent,
  UGContextMenuItem,
  UGContextMenuSeparator,
  UGToaster,
  toast,
} from '@ug666/ui-react'

基础右键菜单

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

右键此处打开菜单

文件操作场景

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

设计稿 v3.fig

右键查看操作

代码示例

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

tsx

import { Copy, Clipboard, Trash2 } from 'lucide-react'
import {
  UGContextMenu,
  UGContextMenuContent,
  UGContextMenuItem,
  UGContextMenuSeparator,
  UGContextMenuTrigger,
  UGToaster,
  toast,
} from '@ug666/ui-react'

export function FileCard() {
  return (
    <UGContextMenu>
      <UGToaster />
      <UGContextMenuTrigger>
        <div className="rounded-xl border border-dashed border-border-strong p-10 text-center text-sm text-text-secondary">
          右键此处打开菜单
        </div>
      </UGContextMenuTrigger>
      <UGContextMenuContent>
        <UGContextMenuItem onClick={() => toast.success('已复制')}>
          <Copy size={14} className="mr-2 inline" />复制
        </UGContextMenuItem>
        <UGContextMenuItem onClick={() => toast.success('已粘贴')}>
          <Clipboard size={14} className="mr-2 inline" />粘贴
        </UGContextMenuItem>
        <UGContextMenuSeparator />
        <UGContextMenuItem destructive onClick={() => toast.error('已删除')}>
          <Trash2 size={14} className="mr-2 inline" />删除
        </UGContextMenuItem>
      </UGContextMenuContent>
    </UGContextMenu>
  )
}

Props

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