Vue composition API for listen keyboard event.
npm install @yafh/use-tinykeys
or usage yarn
yarn add @yafh/use-tinykeys
import { useTinykeys } from '@yafh/use-tinykeys'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
// 监听单个键盘值
const { enable } = useKeyStroke('Control+s', (event) => {
console.log(event)
})
// 监听多个键盘值
const { enable } = useKeyStroke(
['Control+s', 'Control+Shift+s'],
(event) => {
console.log(event)
}
)
// 同时监听多个键盘事件
const { enable } = useKeyStroke(
'Control+s',
(event) => {
console.log(event)
},
{
eventType: ['keydown', 'keyup'],
}
)
// 分别监听多个键盘事件
const { enable } = useKeyStroke('Control+s', {
keydown: (event) => {
console.log(event)
},
keyup: (event) => {
console.log(event)
},
})
// 针对不同平台监听不同键盘值
const { enable } = useKeyStroke(
{
windows: 'Control+s',
mac: ['Command+s', 'Command+Shift+s'],
},
(event) => {
console.log(event)
}
)
// 更换监听目标
const { enable } = useKeyStroke(
'Control+s',
(event) => {
console.log(event)
},
{
target: document.body,
}
)
},
})
按键 key 说明:
- 'a' - 按下 a 键
- 'Control+a' - 按下 ctrl+a 键
- 'a b c d' - 依次按下 a、b、c、d 键
预设键值点击查看
需要监听的DOM元素
- type Window | HTMLElement
- default: window
监听的事件类型
- type 'keydown' | 'keyup' or ('keydown' | 'keyup')[]
- default: 'keydown'
连键超时时间(毫秒)
- type number
- default: 300
在组件不激活时是否仍然监听键盘事件
- type boolean