Preview Updated 2026-05-10

Context menu

A menu opened by right-click. Supports separators, shortcuts, and danger items, and is automatically clamped within the viewport.

Basic usage

Wrap a target region. After a right-click triggers the contextmenu event, the menu is shown at the cursor position. Esc or clicking outside closes it.

背景

<script setup lang="ts">
import { CfContextMenu } from '@chufix-design/vue';
const items = [
  { label: '复制', value: 'copy', shortcut: '⌘C' },
  { label: '剪切', value: 'cut', shortcut: '⌘X' },
  { label: '粘贴', value: 'paste', shortcut: '⌘V' },
  { separator: true },
  { label: '查看属性', value: 'props' },
  { separator: true },
  { label: '删除', value: 'delete', shortcut: '⌫', danger: true },
];
</script>

<template>
  <CfContextMenu :items="items" @select="(v) => alert(`Selected: ${v}`)">
    <div style="padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--r-6); text-align: center; color: var(--fg-2);">
      在这里点击右键 →
    </div>
  </CfContextMenu>
</template>

<script setup>
import { CfContextMenu } from '@chufix-design/vue';
const items = [
  { label: '复制', value: 'copy', shortcut: '⌘C' },
  { label: '剪切', value: 'cut', shortcut: '⌘X' },
  { label: '粘贴', value: 'paste', shortcut: '⌘V' },
  { separator: true },
  { label: '查看属性', value: 'props' },
  { separator: true },
  { label: '删除', value: 'delete', shortcut: '⌫', danger: true },
];
</script>

<template>
  <CfContextMenu :items="items" @select="(v) => alert(`Selected: ${v}`)">
    <div style="padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--r-6); text-align: center; color: var(--fg-2);">
      在这里点击右键 →
    </div>
  </CfContextMenu>
</template>

<CfContextMenu items={items} onSelect={onPick}>
<div>Right-click here</div>
</CfContextMenu>

<CfContextMenu items={items} onSelect={onPick}>
<div>Right-click here</div>
</CfContextMenu>

Disabled / danger / separator

disabled greys an item out, danger turns it red, and separator: true draws a divider row.

背景

右键 → 查看完整菜单（含 disabled / danger / separator）

<script setup lang="ts">
import { CfContextMenu } from '@chufix-design/vue';
const items = [
  { label: '新建文件', value: 'newfile', shortcut: '⌘N' },
  { label: '新建文件夹', value: 'newdir', shortcut: '⌘⇧N' },
  { separator: true },
  { label: '导入...', value: 'import' },
  { label: '导出 OpenAPI', value: 'export', disabled: true },
  { separator: true },
  { label: '永久删除', value: 'delete', shortcut: '⌫', danger: true },
];
</script>

<template>
  <CfContextMenu :items="items" @select="(v) => alert(`Selected: ${v}`)">
    <div style="padding: 36px; border: 1px dashed var(--line-2); border-radius: var(--r-6); text-align: center; color: var(--fg-2); background: var(--bg-1);">
      右键 → 查看完整菜单（含 disabled / danger / separator）
    </div>
  </CfContextMenu>
</template>

<script setup>
import { CfContextMenu } from '@chufix-design/vue';
const items = [
  { label: '新建文件', value: 'newfile', shortcut: '⌘N' },
  { label: '新建文件夹', value: 'newdir', shortcut: '⌘⇧N' },
  { separator: true },
  { label: '导入...', value: 'import' },
  { label: '导出 OpenAPI', value: 'export', disabled: true },
  { separator: true },
  { label: '永久删除', value: 'delete', shortcut: '⌫', danger: true },
];
</script>

<template>
  <CfContextMenu :items="items" @select="(v) => alert(`Selected: ${v}`)">
    <div style="padding: 36px; border: 1px dashed var(--line-2); border-radius: var(--r-6); text-align: center; color: var(--fg-2); background: var(--bg-1);">
      右键 → 查看完整菜单（含 disabled / danger / separator）
    </div>
  </CfContextMenu>
</template>

<CfContextMenu items={items}>…</CfContextMenu>

<CfContextMenu items={items}>…</CfContextMenu>

API

items: ContextMenuItem[]. Each entry supports:

Field	Type	Description
`label`	`string`	Text
`value`	`string`	Value emitted on select (falls back to label)
`shortcut`	`string`	Right-aligned shortcut hint
`disabled`	`boolean`
`danger`	`boolean`	Red styling
`separator`	`boolean`	Divider row (other fields ignored)