Context Menu 右键菜单

某个区域的操作菜单，通过右键（鼠标 / 触控板）在指针处或长按（触屏）在手指处打开。在紧凑触屏上变为底部面板。

基础用法

SContextMenu() {
  SContextMenuTrigger() { /* any area */ }
  SContextMenuContent() {
    SContextMenuItem({ text: 'Back', shortcut: '⌘[', onSelect: () => ... })
    SContextMenuItem({ text: 'Forward', shortcut: '⌘]', disabled: true })
    SContextMenuItem({ text: 'Reload', shortcut: '⌘R', onSelect: () => ... })
    SContextMenuSeparator()
    SContextMenuCheckboxItem({ text: 'Show Bookmarks', checked: this.bookmarks!! })
    SContextMenuCheckboxItem({ text: 'Show Full URLs', checked: this.urls!! })
    SContextMenuSeparator()
    SContextMenuLabel({ text: 'People', inset: true })
    SContextMenuRadioGroup({ value: this.person!! }) {
      SContextMenuRadioItem({ value: 'pedro', text: 'Pedro Duarte' })
      SContextMenuRadioItem({ value: 'colm', text: 'Colm Tuite' })
    }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SContextMenu

shadcn-vue 的 ContextMenu：在触发区域右键（指针，位于指针位置）或长按（触控，位于手指位置）时打开的菜单。在紧凑的触控屏上会变为底部面板。

属性	类型	默认值	说明
disabled	boolean	false

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }

插槽: 子组件（尾随闭包）

SContextMenuTrigger

用于打开菜单的区域：鼠标右键 → 在指针位置打开；触控长按（500 ms 内移动不超过 10 vp）→ 在手指位置打开。长按使用触控计时器（LongPressGesture 会被内部按钮抢占）。

插槽: 子组件（尾随闭包）

SContextMenuContent

bg-popover min-w-[8rem] rounded-md border p-1 shadow-md，位于指针处；紧凑的触控屏上为底部面板。

属性	类型	默认值	说明
panelWidth	number	208	面板宽度，单位 vp（shadcn 演示为 w-52 = 208）；各行以此为基准计算尺寸
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

插槽: 子组件（尾随闭包）

SContextMenuItem

操作行；激活后关闭菜单（除非设置了 keepOpen）。点按、点击、空格 / Enter 以及屏幕阅读器激活都会触发 onSelect（在条目上链式调用的 .onClick() 不会触发）。

属性	类型	默认值	说明
text	ResourceStr	''
icon	string | undefined	undefined
shortcut	string | undefined	undefined
variant	MenuItemVariant MenuItemVariant = 'default' | 'destructive'	'default'
disabled	boolean	false
inset	boolean	false
keepOpen	boolean	false

事件	类型	默认值	说明
onSelect	() => void	() => { }

SContextMenuCheckboxItem

属性	类型	默认值	说明
value	string	''	非受控记忆的标识（默认：label）
text	ResourceStr	''
shortcut	string | undefined	undefined
checked!!	boolean | undefined	undefined
defaultChecked	boolean	false
disabled	boolean	false

事件	类型	默认值	说明
onCheckedChange	(v: boolean) => void	() => { }

SContextMenuRadioGroup

属性	类型	默认值	说明
name	string	''	非受控记忆的标识（默认：defaultValue）
value!!	string | undefined	undefined
defaultValue	string	''

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }

插槽: 子组件（尾随闭包）

SContextMenuRadioItem

属性	类型	默认值	说明
value	string	''
text	ResourceStr	''
disabled	boolean	false

SContextMenuLabel

属性	类型	默认值	说明
text	ResourceStr	''
inset	boolean	false

SContextMenuSeparator

无属性。

SContextMenuGroup

插槽: 子组件（尾随闭包）