ContextMenu 右键菜单
在包裹区域内右键弹出菜单，菜单定位在鼠标位置。
基础用法
右键触发
禁用项
禁用项
多级子菜单
多级子菜单
带 children 的菜单项 hover / 点击展开级联子菜单，选中叶子项后自动收回并关闭。
选择事件
选择事件
编程式定位与受控 open
show(x, y) / close()
show(x, y) 可在任意坐标弹菜单（表格行 / 画布 / 选区右键等脱离宿主元素的场景），close() 编程式关闭；open 属性受控开关，开合状态经 oas-open-change 事件感知。
长按触发（移动端）
移动端没有右键，长按（默认 500ms）即触发菜单；long-press-delay 可调时长（毫秒）。桌面浏览器可用 DevTools 设备模拟验证。
长按触发
滚动关闭
菜单为 fixed 定位，打开后滚动页面或内部滚动区域默认自动关闭（避免与内容脱节）；close-on-scroll="false" 可关闭该行为。
滚动关闭
子元素声明式通道
除 items JSON 外，可用 <oas-context-menu-item> / <oas-context-menu-group> / <oas-context-menu-divider> 子元素声明式书写菜单（items 属性显式设置时优先，未设置时解析子元素收敛到同一渲染路径）。默认插槽文本为 label，属性对齐 items 字段：value / disabled / loading / icon / kind / danger / href / target / rel；<oas-context-menu-item> 内直接嵌套子元素即递归为子菜单，<oas-context-menu-group> 的 label 属性为组标题（value 可作 radio 组 id），组内子元素平铺同层。子元素增删、属性与文本变化会自动重渲染（MutationObserver）。
子元素声明式（分组 / 分隔线 / 嵌套 / danger / href）
动态增删（MutationObserver 自动刷新）
勾选项与动作项（kind）
kind="checkbox" 渲染多选勾选项（menuitemcheckbox 语义，点击切换勾选、value 数组写回）；kind="action" 为纯动作项（无勾选态、不写回 value，点击仅派发事件）。
勾选项 + 动作项（kind）
已勾：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 时渲染为原生 <a>（真实跳转 + 照常派发 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 内容（默认插槽文本）；直接子元素 <oas-context-menu-item> 递归为子菜单 children |
template[slot="leading"] | 前置媒体模板（或直接子元素加 slot="leading"）：头像/色块等任意前置内容，渲染在 label 前、优先于 icon 图标；loading 态由 spinner 替换；仅子元素声明式通道可用（items JSON 不支持） |
oas-context-menu-group
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | 分组标题（组标题小字、次要色、不可点） | — | — |
value | radio 组 id（组内点选只更新该组选中值） | — | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 组内菜单项：子元素 <oas-context-menu-item> 平铺同层 |
oas-context-menu-divider
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 分隔线数据载体（无属性，宿主解析为 type: "divider"） |
鼠标位置弹出，Esc / 外部点击 / 选择后自动关闭；role="menu" + menuitem。