面试题：Vue 项目中如何监听键盘事件？

在 Vue 项目中，监听键盘事件可以通过以下几种方式实现：

1. 使用 `v-on` 或 `@` 监听键盘事件

作用：直接在模板中监听键盘事件。
使用方法：
- 使用 v-on:keyup 或 @keyup 监听键盘松开事件。
- 使用 v-on:keydown 或 @keydown 监听键盘按下事件。

示例：

<template>
  <input @keyup="handleKeyUp" @keydown="handleKeyDown" />
</template>

<script>
export default {
  methods: {
    handleKeyUp(event) {
      console.log('按键松开:', event.key);
    },
    handleKeyDown(event) {
      console.log('按键按下:', event.key);
    }
  }
};
</script>

特点：
- 简单直接，适合监听输入框等元素的键盘事件。

2. 使用按键修饰符

作用：监听特定的按键事件。
使用方法：
- 使用 .enter、.tab、.esc、.space 等修饰符监听特定按键。

示例：

<template>
  <input @keyup.enter="handleEnter" @keyup.esc="handleEsc" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('回车键被按下');
    },
    handleEsc() {
      console.log('ESC 键被按下');
    }
  }
};
</script>

支持的修饰符：
- .enter
- .tab
- .delete（捕获“删除”和“退格”键）
- .esc
- .space
- .up
- .down
- .left
- .right

3. 自定义按键修饰符

作用：监听自定义按键。
使用方法：
- 通过 Vue.config.keyCodes 定义自定义按键修饰符。

示例：

Vue.config.keyCodes = {
  f1: 112, // F1 键的键码
  customKey: 65 // 自定义按键（例如 A 键）
};<template>
  <input @keyup.f1="handleF1" @keyup.customKey="handleCustomKey" />
</template>

<script>
export default {
  methods: {
    handleF1() {
      console.log('F1 键被按下');
    },
    handleCustomKey() {
      console.log('自定义键被按下');
    }
  }
};
</script>

4. 监听全局键盘事件

作用：在组件的生命周期中监听全局键盘事件。
使用方法：
- 在 mounted 钩子中添加事件监听器。
- 在 beforeDestroy 钩子中移除事件监听器。

示例：

<template>
  <div>按下任意键</div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('keyup', this.handleGlobalKeyUp);
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.handleGlobalKeyUp);
  },
  methods: {
    handleGlobalKeyUp(event) {
      console.log('全局按键松开:', event.key);
    }
  }
};
</script>

特点：
- 适合监听全局键盘事件，如快捷键。

5. 使用第三方库

作用：通过第三方库简化键盘事件的处理。
常用库：
- vue-hotkey：用于监听快捷键。
- keymaster：轻量级的键盘事件库。

示例（使用 v-hotkey）：

<template>
  <div v-hotkey="keymap">按下 Ctrl + S</div>
</template>

<script>
export default {
  data() {
    return {
      keymap: {
        'ctrl+s': this.saveData
      }
    };
  },
  methods: {
    saveData() {
      console.log('保存数据');
    }
  }
};
</script>

6. 组合键监听

作用：监听组合键（如 Ctrl + C、Shift + Enter）。
使用方法：
- 通过 event.ctrlKey、event.shiftKey、event.altKey 判断是否按下了修饰键。

示例：

<template>
  <input @keyup="handleCombinationKey" />
</template>

<script>
export default {
  methods: {
    handleCombinationKey(event) {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // 阻止默认行为
        console.log('Ctrl + S 被按下');
      }
    }
  }
};
</script>