# ContextMenu 右键菜单 在包裹区域内右键弹出菜单，菜单定位在鼠标位置。 ## 基础用法
在此区域右键查看菜单
 ## 禁用项
右键查看（删除不可用）
 ## 多级子菜单
右键查看多级子菜单
 带 `children` 的菜单项 hover / 点击展开级联子菜单，选中叶子项后自动收回并关闭。 ## 选择事件
在此区域右键
 尚未选择 ## 编程式定位与受控 open
在 (140, 120) 打开 关闭 未打开
此区域右键打开，或点上方按钮以任意坐标打开
 `show(x, y)` 可在任意坐标弹菜单（表格行 / 画布 / 选区右键等脱离宿主元素的场景），`close()` 编程式关闭；`open` 属性受控开关，开合状态经 `oas-open-change` 事件感知。 ## 长按触发（移动端） 移动端没有右键，长按（默认 500ms）即触发菜单；`long-press-delay` 可调时长（毫秒）。桌面浏览器可用 DevTools 设备模拟验证。
移动端长按此区域打开菜单
 ## 滚动关闭 菜单为 fixed 定位，打开后滚动页面或内部滚动区域默认自动关闭（避免与内容脱节）；`close-on-scroll="false"` 可关闭该行为。
右键打开菜单后滚动下方区域，菜单即关闭
右键我：close-on-scroll="false" 滚动不关闭
滚动内容……（菜单打开后在此滚动即自动关闭）
 ## 子元素声明式通道 除 `items` JSON 外，可用 `` / `` / `` 子元素声明式书写菜单（`items` 属性**显式设置时优先**，未设置时解析子元素收敛到同一渲染路径）。默认插槽文本为 label，属性对齐 `items` 字段：`value` / `disabled` / `loading` / `icon` / `kind` / `danger` / `href` / `target` / `rel`；`` 内直接嵌套子元素即递归为子菜单，`` 的 `label` 属性为组标题（`value` 可作 radio 组 id），组内子元素平铺同层。子元素增删、属性与文本变化会自动重渲染（MutationObserver）。
在此区域右键查看声明式菜单
复制 粘贴 新建 文件 文件夹 组件文档 删除 尚未选择 追加一项
右键我，点上方按钮追加一项
复制 粘贴 ## 勾选项与动作项（kind） `kind="checkbox"` 渲染多选勾选项（menuitemcheckbox 语义，点击切换勾选、value 数组写回）；`kind="action"` 为纯动作项（无勾选态、不写回 value，点击仅派发事件）。
右键查看勾选项

已勾：grid

 ## API ### oas-context-menu #### 属性 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `close-on-scroll` | 页面滚动时关闭菜单（默认 true） | `string` | `true` | | `items` | 菜单项 JSON | `string` | `[]` | | `long-press-delay` | 移动端长按触发时长毫秒数（默认 500） | `string` | `500` | | `open` | 受控展开态（外部可写） | `boolean` | — | | `value` | 勾选项（kind="checkbox"）的勾选集（JSON 数组）；勾选切换写回宿主，跨开合保留 | `string` | — | #### 事件 | 事件 | 说明 | | --- | --- | | `oas-open-change` | 菜单开合变化，`detail: { open: boolean }` | | `oas-select` | 选择某项，`detail: { value }` | #### 插槽 | 名称 | 说明 | | --- | --- | | 默认 | 右键菜单内容（菜单项 / 分组） | #### CSS 变量 | CSS 变量 | 默认值 | | --- | --- | | `--oas-glass-blur` | `none` | | `--oas-glass-ring` | `transparent` | ### oas-context-menu-item #### 属性 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `danger` | 破坏性项：红色语义（删除/退出等危险操作） | — | — | | `disabled` | 禁用该项 | — | — | | `href` | 链接地址：有 href 时渲染为原生 ``（真实跳转 + 照常派发 `oas-select`） | — | — | | `icon` | 前置图标（`@oas-ui/icons` 内置图标名） | — | — | | `icon-color` | 图标颜色：样式固定为该色（覆盖选中/禁用态默认色），缺省 currentColor 跟随文字色（仅 items JSON 通道生效；子元素通道不解析该属性） | — | — | | `kind` | 叶子项语义：`radio`（默认，可勾选）/ `action`（动作项，无勾选态、不写回 value）/ `checkbox`（多选勾选，value 数组勾选集） | — | — | | `loading` | 加载中：渲染 spinner、禁点，由数据驱动恢复 | — | — | | `rel` | 链接 rel（配合 href） | — | — | | `shortcut` | 最右侧快捷键注释（kbd 视觉，与 menubar/menu shortcut 契约一致）（仅 items JSON 通道生效；子元素通道不解析该属性） | — | — | | `target` | 链接 target（配合 href） | — | — | | `value` | 选中值（子元素声明式通道的数据载体字段） | — | — | #### 插槽 | 名称 | 说明 | | --- | --- | | 默认 | 右键菜单项 label 内容（默认插槽文本）；直接子元素 `` 递归为子菜单 children | | `template[slot="leading"]` | 前置媒体模板（或直接子元素加 slot="leading"）：头像/色块等任意前置内容，渲染在 label 前、优先于 icon 图标；loading 态由 spinner 替换；仅子元素声明式通道可用（items JSON 不支持） | ### oas-context-menu-group #### 属性 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `label` | 分组标题（组标题小字、次要色、不可点） | — | — | | `value` | radio 组 id（组内点选只更新该组选中值） | — | — | #### 插槽 | 名称 | 说明 | | --- | --- | | 默认 | 组内菜单项：子元素 `` 平铺同层 | ### oas-context-menu-divider #### 插槽 | 名称 | 说明 | | --- | --- | | 默认 | 分隔线数据载体（无属性，宿主解析为 `type: "divider"`） | 鼠标位置弹出，Esc / 外部点击 / 选择后自动关闭；`role="menu"` + `menuitem`。