vue3监听键盘长按

需要 如果键盘长按上下左右 则执行一定操作
我是封装一个hooks

import { onMounted, onUnmounted } from 'vue';

export const useLongPress = (keyCode: number, callback: any, delay = 100) => {
  let timer: any = null;

  const startLongPress = (event: any) => {
    if (event.keyCode !== keyCode) return;

    if (!timer) {
      timer = setTimeout(() => {
        callback();
        timer = null;
      }, delay);
    }
  };

  const endLongPress = (event: any) => {
    if (event.keyCode !== keyCode) return;

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };

  onMounted(() => {
    window.addEventListener('keydown', startLongPress);
    window.addEventListener('keyup', endLongPress);
  });

  onUnmounted(() => {
    window.removeEventListener('keydown', startLongPress);
    window.removeEventListener('keyup', endLongPress);
  });
};

然后再使用的地方

import { useLongPress } from '@/hooks/useLongPress';


// 键盘长按
useLongPress(KeyCode.up, () => {
  handleDirection('up');
});

注意
window.addEventListener(‘keydown’, startLongPress); 是代表只要一直按着就会触发startLongPress事件，但是这个出发的频率取决于我们操作系统键盘设置中的键重复速率来决定
设置方法是
Windows: 打开控制面板，选择 “键盘”，在弹出的窗口中，你可以更改 “字符重复” 下的 “重复延迟” 和 “重复速率”。
macOS: 打开 “系统偏好设置”，然后选择 “键盘”，在这里你可以更改 “按键重复” 和 “重复前的延迟”。
Linux/Ubuntu: 打开 “设置”，找到 “设备” 下的 “键盘”，点击 “重复键” 标签，然后你可以更改 “重复延迟” 和 “重复速度”。