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) => voidundefined
content自定义显示的键名内容(仅影响提示 UI,不改监听),逐项对应(string | Snippet)[]undefined
render完全自定义提示渲染;传 null 则不渲染提示,仅保留监听Snippet | nullundefined
preventDefault命中时是否 event.preventDefault()(拦截浏览器默认行为)booleanfalse
mergeMetaCtrl跨平台把 Cmd(Meta) 与 Ctrl 视为同一修饰键(本库真正实现,Semi 未生效)booleanfalse
getListenerTarget监听挂载节点;返回具体元素实现局部监听() => HTMLElement | null() => document.body
disabled禁用监听(不绑定,不触发)booleanfalse
class根节点类名stringundefined
style根节点内联样式stringundefined

Events

事件载荷说明
onHotKey(e: KeyboardEvent)组合命中(preventDefault 后)触发

Slots

名称说明
render自定义整个提示 UI(等价 render prop)

Accessibility

APGkeyboard-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)键位之间 + 分隔符颜色