监听键盘事件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 })

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