HotKeys
声明一组键盘快捷键组合并绑定 keydown 监听(默认全局 document.body,可局部),命中触发回调,并渲染语义化 <kbd> 键位提示。修饰键精确匹配 + 普通键用 event.code(物理键位,规避输入法/大小写),mergeMetaCtrl 真正实现跨平台合并 Cmd/Ctrl(Semi 该 prop 未生效)。
如何引入
import { HotKeys } from '@chenzy-design/svelte';基础用法
声明 Ctrl+Shift+A 组合,命中触发回调;修饰键精确匹配,普通键用物理键位。
按下 Ctrl Shift A 命中次数:0
修饰键精确匹配,普通键用物理键位(event.code),规避输入法/大小写。自定义键名
content 自定义提示显示文本,不影响监听匹配;默认渲染随平台显示 ⌘/Ctrl。
默认渲染(自动平台符号): Win K
content 自定义键名文本: Ctrl K
content 仅改提示显示,不影响监听匹配。render 自定义
render 完全接管提示 UI;render 传 null 则只监听不显示。
render 完全自定义提示: ⌘S 保存 保存次数:0
传 render 完全接管提示 UI;传 render 为 null 则只监听不显示。拦截默认行为
preventDefault 命中时阻止浏览器默认快捷键(如 Ctrl+S 保存网页)。
preventDefault 拦截浏览器默认行为: Ctrl S 已拦截 Ctrl+S:0 次
按 Ctrl+S 不再触发浏览器「保存网页」,改为执行回调。局部监听
getListenerTarget 返回具体元素,只在该元素作用域内监听。
getListenerTarget 局部监听:仅当焦点在下方面板内按 Enter 才命中。 面板内 Enter 命中:0 次
跨平台合并
mergeMetaCtrl 把 Cmd(Meta) 与 Ctrl 视为同一修饰键(本库真正实现,Semi 未生效)。
mergeMetaCtrl 跨平台合并 Cmd/Ctrl: Ctrl K 命中:0 次
macOS 按 ⌘K、Windows/Linux 按 Ctrl+K 均命中同一组合(Semi 该 prop 未生效,本库真正实现)。API 参考
HotKeys
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
hotKeys | 必填。组合数组,恰含 1 个普通键 + 0~多修饰键;取值用 KeyboardEvent.key 或 HotKeys.Keys.*;非法抛错 | string[] | — |
onHotKey | 命中组合时触发,透传原生事件 | (e: KeyboardEvent) => void | undefined |
content | 自定义显示的键名内容(仅影响提示 UI,不改监听),逐项对应 | (string | Snippet)[] | undefined |
render | 完全自定义提示渲染;传 null 则不渲染提示,仅保留监听 | Snippet | null | undefined |
preventDefault | 命中时是否 event.preventDefault()(拦截浏览器默认行为) | boolean | false |
mergeMetaCtrl | 跨平台把 Cmd(Meta) 与 Ctrl 视为同一修饰键(本库真正实现,Semi 未生效) | boolean | false |
getListenerTarget | 监听挂载节点;返回具体元素实现局部监听 | () => HTMLElement | null | () => document.body |
disabled | 禁用监听(不绑定,不触发) | boolean | false |
class | 根节点类名 | string | undefined |
style | 根节点内联样式 | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onHotKey | (e: KeyboardEvent) | 组合命中(preventDefault 后)触发 |
Slots
| 名称 | 说明 |
|---|---|
render | 自定义整个提示 UI(等价 render prop) |
Accessibility
| APG | keyboard-shortcut-hint |
| 键盘交互 | 全局/局部 keydown 监听,命中组合触发回调 |
- 每个键位用语义化 <kbd> 承载(超越 Semi 的 span),屏幕阅读器识别为键盘输入
- `+` 分隔符 aria-hidden="true"
- 提示容器 aria-keyshortcuts 声明快捷键(W3C 语法:Control+K)
- 匹配用 event.code 物理键位,规避输入法/大小写/Shift
- 键位文本可选中(不设 user-select:none,允许复制)
- 对比度:键位块文字/背景 ≥4.5:1;RTL:从逻辑起始排列
- 提示纯展示无焦点;监听不引入焦点陷阱
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-hotkeys-content-bg | var(--cd-color-fill-0) | 单个 <kbd> 键位块背景 |
--cd-hotkeys-content-border | var(--cd-color-border) | 单个键位块边框色 |
--cd-hotkeys-content-color | var(--cd-color-text-1) | 键位块内文字/符号颜色 |
--cd-hotkeys-split-color | var(--cd-color-text-2) | 键位之间 + 分隔符颜色 |