仅桌面端保证样式

ContextMenu 右键菜单

在光标处弹出的上下文菜单：默认插槽包裹触发区域，区域内右键即弹出（自动阻止浏览器默认菜单）；items 配置驱动菜单内容，也可命令式调用按目标切换菜单，弹层 Teleport 至 body、视口边缘自动翻转钳位。

基础用法

把需要响应右键的内容写入默认插槽，菜单项通过 items 配置：label 文本、icon 图标、command 指令值（支持字符串、数字、对象等任意类型），点击菜单项抛出 command 事件并自动收起。

最近 command：右键菜单项试试

  <eb-context-menu :items="items" @command="onCommand">
    <div class="cm-stage">右键此区域打开菜单</div>
  </eb-context-menu>
  <p style="margin-top: 8px; font-size: 13px; color: #909399;">最近 command：{{ lastCommand || '右键菜单项试试' }}</p>

菜单项形态

disabled 置灰禁点、divided 顶部分隔线、danger 标识删除类危险操作（红色，悬停不转主色）。

  <eb-context-menu :items="styledItems" @command="onCommand">
    <div class="cm-stage">右键查看菜单项形态</div>
  </eb-context-menu>

子菜单

菜单项带 children 数组即展开一级子菜单：悬停延时弹出、点击父项也可展开；子菜单默认挂在右侧，视口右侧放不下自动翻到左侧，纵向始终钳位在视口内。父项与子项共用同一个 command 事件。

  <eb-context-menu :items="subItems" @command="onCommand">
    <div class="cm-stage">右键打开带子菜单的菜单</div>
  </eb-context-menu>

命令式调用

不写默认插槽时组件只是命令式引擎：通过模板 ref 调用 open，第一个参数传 MouseEvent 或 { x, y } 坐标点，第二个参数可传入临时 items 覆盖配置——同一个菜单实例即可服务多个目标，各自弹出各自的菜单。close 与 visible 程序化控制显隐，visible-change 监听开关。

右键：文件目标

右键：文件夹目标

  <div
    class="cm-stage cm-stage--sub"
    @contextmenu.prevent="fileMenu?.open($event, fileItems)"
  >右键：文件目标</div>
  <div
    class="cm-stage cm-stage--sub"
    @contextmenu.prevent="folderMenu?.open($event, folderItems)"
  >右键：文件夹目标</div>
  <eb-context-menu ref="fileMenu" @command="onCommand" />
  <eb-context-menu ref="folderMenu" @command="onCommand" />

API

ContextMenu Props

参数	说明	类型	默认值
items	菜单项配置数组	MenuItem[]	[]
disabled	禁用（区域右键与命令式 open 均不弹出）	boolean	false

MenuItem 配置项

参数	说明	类型	默认值
label	菜单项文本	string	—
icon	图标名（registry）	string	—
command	指令值，点击时随 command 事件抛出	string \| number \| object	—
disabled	禁用当前项	boolean	false
divided	显示顶部分隔线	boolean	false
danger	危险操作（红色标识）	boolean	false
children	一级子菜单（同 MenuItem 结构）	MenuItem[]	—

ContextMenu Events

参数	说明	类型	默认值
command	菜单项点击（含子菜单项，抛出后自动关闭）	(command) => void	—
visible-change	浮层显隐变化	(visible: boolean) => void	—

ContextMenu Slots

参数	说明	类型	默认值
default	触发区域（区域内右键弹出；不写则为纯命令式用法）	—	—

ContextMenu Methods

参数	说明	类型	默认值
open	在指定位置弹出（传 MouseEvent 或 { x, y }；第二参可传临时 items 覆盖）	(target, itemsOverride?) => void	—
close	关闭浮层	() => void	—
visible	显隐状态（ref）	Ref<boolean>	—

ContextMenu 右键菜单 ​

基础用法 ​

菜单项形态 ​

子菜单 ​

命令式调用 ​

API ​