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

Kbd 键盘按键

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

基础用法

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

背景

命令面板：Ctrl+K

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <span>命令面板：<CfKbd :keys="['Ctrl', 'K']" /></span>
</template>

<script setup>
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <span>命令面板：<CfKbd :keys="['Ctrl', 'K']" /></span>
</template>

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

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

组合键 + 自定义分隔符

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

背景

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

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction: column; gap: 8px;">
    <span>新建文件：<CfKbd :keys="['⌘', 'N']" /></span>
    <span>关闭标签：<CfKbd :keys="['Ctrl', 'W']" /></span>
    <span>三键组合：<CfKbd :keys="['Ctrl', 'Shift', 'P']" /></span>
    <span>Vim 退出：<CfKbd :keys="['Esc', ':', 'q']" separator=" " /></span>
  </div>
</template>

<script setup>
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction: column; gap: 8px;">
    <span>新建文件：<CfKbd :keys="['⌘', 'N']" /></span>
    <span>关闭标签：<CfKbd :keys="['Ctrl', 'W']" /></span>
    <span>三键组合：<CfKbd :keys="['Ctrl', 'Shift', 'P']" /></span>
    <span>Vim 退出：<CfKbd :keys="['Esc', ':', 'q']" separator=" " /></span>
  </div>
</template>

<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

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd>Caps Lock</CfKbd>
    <CfKbd>Tab</CfKbd>
    <CfKbd>Esc</CfKbd>
    <CfKbd>Enter</CfKbd>
    <CfKbd>Space</CfKbd>
  </div>
</template>

<script setup>
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd>Caps Lock</CfKbd>
    <CfKbd>Tab</CfKbd>
    <CfKbd>Esc</CfKbd>
    <CfKbd>Enter</CfKbd>
    <CfKbd>Space</CfKbd>
  </div>
</template>

<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

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd :keys="['Ctrl', 'K']" size="sm" />
    <CfKbd :keys="['Ctrl', 'K']" size="md" />
    <CfKbd :keys="['Ctrl', 'K']" size="lg" />
  </div>
</template>

<script setup>
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd :keys="['Ctrl', 'K']" size="sm" />
    <CfKbd :keys="['Ctrl', 'K']" size="md" />
    <CfKbd :keys="['Ctrl', 'K']" size="lg" />
  </div>
</template>

<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'`	尺寸