监听键盘事件vue3封装hooks

监听页面键盘事件，执行对应方法

使用第三方API：vueuse

我封装的：

1. useKeyboardEvent.ts

import { useMagicKeys } from '@vueuse/core'export function enterKey(f: Function) {const { enter } = useMagicKeys()watch(enter, v => {if (v) {f()}})
}

2. 页面使用

import { enterKey } from '@/hooks/useKeyboardEvent'
enterKey(handleQuery)
function handleQuery() {...
}

前端大佬封装的：

1. useKeyboardEvent.ts

import { useMagicKeys, whenever } from '@vueuse/core'export function useKeys(keysMap: Record<string, Function>) {const magicKeys = useMagicKeys()Object.keys(keysMap).forEach(key => {whenever(magicKeys[key], () => keysMap[key]())})
}

2. 页面使用

import { useKeys } from '@/hooks/useKeyboardEvent'function handleQuery() {...
}
useKeys({ enter: handleQuery })

大佬封装的扩展性就很强，啥都不说了，膜拜大佬