代码演示
如何引入
HotKeys 从 2.66.0 开始支持
jsx
import { HotKeys } from '@kousum/semi-ui-vue';说明
快捷键仅支持修饰键组合Shift,Control,Meta,Alt与其他键的组合。
Meta 在MacOS中为
Command，在Windows中为Win
当设定快捷键与常用快捷键如Ctrl/Meta + C相同时，可以通过设置preventDefault控制默认事件是否触发。
基本
基本使用，通过hotKeys传入快捷键组合，通过 onHotKey 绑定快捷键处理函数，作出响应动作。
按下 Ctrl + Shift + A， 唤起modal。默认在 body.document 监听，全局生效。
hotKeys取值参考，也可以使用HotKeys.Keys进行设置
自定义内容
通过content传入渲染的字符
通过render传入代替渲染的元素
阻止默认事件
通过设置preventDefault控制默认事件是否触发。
修改监听挂载DOM
快捷键默认在 body 监听，通过getListenerTarget修改快捷键监听挂载的DOM
API 参考
HotKeys
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 类名 | string | |
| content | 设置显示内容 | string[] | - |
| getListenerTarget | 用于设置监听器挂载的DOM | () => HTMLElement | document.body |
| hotKeys | 设置快捷键组合，取值参考 | KeyboardEvent.key[] | - |
| onClick | 点击回调函数 | () => void | - |
| onHotKey | 快捷键回调函数 | (e: KeyboardEvent) => void | - |
| preventDefault | 是否阻止快捷键默认行为 | boolean | false |
| render | 覆盖组件渲染 | () => ReactNode | ReactNode | |
| style | 样式 | CSSProperties |