Short-cutting 快捷键事件统一解决方案
安装
yarn add short-cutting
or
npm i short-cutting
内置了 Typescript 支持
使用
ES6 项目中使用
import { ShortCutting } from 'short-cutting/lib-esm'
// 引入样式文件
import 'short-cutting/index.css'
// 最简使用
const shortCutting = new ShortCutting()
shortCutting.on({
key: 'a',
}, () => {
console.log('a is clicked')
})
- 主键 支持 key 和 code 两种键声明方式
shortCutting.on({
key: 'a',
}, () => {
console.log('a is clicked')
})
shortCutting.on({
code: 65
}, () => {
console.log('a is clicked')
})
- 支持 >=1 个辅助键,当前支持
ctrl
,command/win
,alt
,shift
shortCut.on({
code: 65,
content: '全选',
ctrl: true,
shift: true,
}, () => {
console.log('a')
} )
- 支持多种组合键,如果你想使用多套快捷键对应一种行为,比如 ctrl + c, command + c 都表示复制当前内容,那么可以使用 assistArray 数组来表示
shortCut.on({
content: '复制',
assistArray: [{ctrl: true}, { meta: true}],
showTip: true,
}, () => {
console.log('c')
})
注意:assistArray 的优先级高于 key 和 code
-
支持 keyUp 事件 第三个可选参数表示 keyUp 的回调函数
-
支持多种闪烁时间选择
const shortCut = new ShortCut({ duration: 'fast' }) // fast | medium | slow
CDN
js: `https://unpkg.com/short-cutting/_bundles/index.js`
css: `https://unpkg.com/short-cutting/_bundles/index.css`
调起快捷键一览,用于展示所有支持的快捷键
shortCutting.showInstruction()
当前支持的辅助键:
- ctrl
- meta (win | command)
- shift
- alt
@TODO 功能点:
- [x] 1. 支持可选键,比如复制,可以使用 ctrl + c,也可以支持 command + c
- [x] 2. 支持快捷键一览表,暴露方法调用
- [ ] 3. 支持多种主题
- [ ] 4. 支持八个方向的位置自定义(默认左下)
- [x] 5. 支持 onbeforeunload 事件劫持
- [x] 6. 支持三种闪烁间隔时间选择:fast | medium | slow
- [ ] 7. 抽离单独的 type.d.ts 包
- [x] 8. 支持 CDN 加载