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

Kbd 键盘按键

显示键盘快捷键的微小排印控件，支持组合键、自定义分隔符、3 档尺寸。

基础用法

keys 数组渲染成多个独立的 <kbd>，自动用 separator（默认 +）拼接。

命令面板：Ctrl+K

<CfKbd :keys="['Ctrl', 'K']" />

<CfKbd keys={['Ctrl', 'K']} />

组合键 + 自定义分隔符

separator 可改 — 比如用空格表示「按下后再按下一个键」（vim 风格）。

新建文件：⌘+N关闭标签：Ctrl+W三键组合：Ctrl+Shift+PVim 退出：Esc : q

<CfKbd :keys="['⌘', 'N']" />
<CfKbd :keys="['Ctrl', 'W']" />
<CfKbd :keys="['Ctrl', 'Shift', 'P']" />
<CfKbd :keys="['Esc', ':', 'q']" separator=" " />

<CfKbd keys={['⌘', 'N']} />
<CfKbd keys={['Ctrl', 'W']} />
<CfKbd keys={['Ctrl', 'Shift', 'P']} />
<CfKbd keys={['Esc', ':', 'q']} separator=" " />

单键（slot 用法）

省略 keys，把按键名写进 default slot / children — 适合「单个键」场景。

Caps LockTabEscEnterSpace

<CfKbd>Caps Lock</CfKbd>
<CfKbd>Tab</CfKbd>
<CfKbd>Esc</CfKbd>
<CfKbd>Enter</CfKbd>
<CfKbd>Space</CfKbd>

<CfKbd>Caps Lock</CfKbd>
<CfKbd>Tab</CfKbd>
<CfKbd>Esc</CfKbd>
<CfKbd>Enter</CfKbd>
<CfKbd>Space</CfKbd>

三档尺寸

size —— sm 行内说明用 / md 默认 / lg 落地页强调用。

Ctrl+KCtrl+KCtrl+K

<CfKbd :keys="['Ctrl', 'K']" size="sm" />
<CfKbd :keys="['Ctrl', 'K']" size="md" />
<CfKbd :keys="['Ctrl', 'K']" size="lg" />

<CfKbd keys={['Ctrl', 'K']} size="sm" />
<CfKbd keys={['Ctrl', 'K']} size="md" />
<CfKbd keys={['Ctrl', 'K']} size="lg" />

API

属性	类型	默认值	说明
`keys`	`string[]`	`[]`	组合键数组，每个元素渲染成单独的 `<kbd>`
`separator`	`string`	`'+'`	多键之间的分隔符
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸