开发预览更新于 2026-05-10

ContextMenu 右键菜单

右键打开的菜单。支持分隔符、快捷键、危险项；自动 clamp 到视口内。

基础用法

包裹目标区域，右键触发 contextmenu 事件后在光标位置显示菜单。Esc / 点击外部关闭。

背景

<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>右键这里</div>
</CfContextMenu>

<CfContextMenu items={items} onSelect={onPick}>
<div>右键这里</div>
</CfContextMenu>

禁用 / 危险 / 分隔符

disabled 灰化、danger 红字、separator: true 画分隔行。

背景

右键 → 查看完整菜单（含 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[]，每项支持：

字段	类型	说明
`label`	`string`	文本
`value`	`string`	选中时的 value（默认回落 label）
`shortcut`	`string`	右侧快捷键提示
`disabled`	`boolean`
`danger`	`boolean`	红色样式
`separator`	`boolean`	分隔行（其他字段忽略）