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

在 Vue 项目中，监听键盘事件（如 keydown、keyup）有多种方式，既可以使用原生的 DOM 事件，也可以利用 Vue 提供的按键修饰符来简化开发。以下是详细的实现方法：

---

一、使用 v-on 或 @ 绑定键盘事件

1. 监听通用键盘事件

<template>
  <!-- 监听 keyup 事件 -->
  <input 
    type="text" 
    @keyup="onKeyup"
    placeholder="输入内容并按任意键"
  />

  <!-- 监听 keydown 事件 -->
  <input 
    type="text" 
    @keydown="onKeydown"
    placeholder="按下键时触发"
  />
</template>

<script>
export default {
  methods: {
    onKeyup(event) {
      console.log('释放的键:', event.key);
      console.log('键码:', event.keyCode);
    },
    onKeydown(event) {
      console.log('按下的键:', event.key);
      if (event.key === 'Enter') {
        console.log('回车键被按下');
      }
    }
  }
}
</script>

---

二、使用 Vue 的按键修饰符（推荐）

Vue 提供了语义化的按键修饰符，可以直接绑定到特定按键，代码更清晰。

常用按键修饰符：

修饰符	对应按键
.enter	Enter 键
.tab	Tab 键
.delete	Delete 和 Backspace 键
.esc	Escape 键
.space	空格键
.up / .down / .left / .right	方向键

示例：监听回车键提交

<template>
  <input 
    v-model="message"
    @keyup.enter="handleSubmit"
    placeholder="按回车提交"
  />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交内容:', this.message);
      // 执行提交逻辑
    }
  }
}
</script>

示例：监听 ESC 键关闭弹窗

<template>
  <div v-if="showModal" @keyup.esc="closeModal" class="modal">
    <p>这是一个模态框，按 ESC 关闭</p>
    <button @click="closeModal">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: true
    }
  },
  methods: {
    closeModal() {
      this.showModal = false;
    }
  },
  mounted() {
    // 确保模态框可以获取焦点以接收键盘事件
    this.$el.focus();
  }
}
</script>

<style>
.modal {
  outline: none; /* 避免默认轮廓 */
}
</style>

---

三、监听组合键（系统修饰符）

使用 .ctrl、.alt、.shift、.meta（Mac Command）等修饰符监听组合键。

<template>
  <!-- Ctrl + 回车 -->
  <input @keyup.ctrl.enter="saveWithCtrl" />

  <!-- Alt + S -->
  <input @keyup.alt.s="quickSave" />

  <!-- 按下 Shift 时不触发 -->
  <input @keyup.shift.enter="ignoreShiftSubmit" />
</template>

<script>
export default {
  methods: {
    saveWithCtrl() {
      console.log('Ctrl + Enter 保存');
    },
    quickSave() {
      console.log('Alt + S 快速保存');
    }
  }
}
</script>

🔥 .exact 修饰符：精确匹配组合键

<!-- 有且仅有 Ctrl 被按下时才触发 -->
<button @click.ctrl.exact="onCtrlOnly">Only Ctrl</button>

---

四、全局监听键盘事件（如监听整个文档）

有时需要监听全局键盘事件（如快捷键），可在 mounted 中绑定，beforeUnmount 中解绑。

<script>
export default {
  mounted() {
    document.addEventListener('keyup', this.handleGlobalKeyUp);
  },
  beforeUnmount() {
    document.removeEventListener('keyup', this.handleGlobalKeyUp);
  },
  methods: {
    handleGlobalKeyUp(event) {
      if (event.key === 'Escape') {
        this.closeAllModals();
      } else if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // 阻止浏览器默认保存
        this.saveDocument();
      }
    },
    closeAllModals() {
      // 关闭所有弹窗
    },
    saveDocument() {
      console.log('Ctrl + S 保存文档');
    }
  }
}
</script>

✅ 注意：记得在组件销毁前移除事件监听，避免内存泄漏。

---

五、使用 v-model 结合 .trim、.number 等修饰符

虽然不是直接监听事件，但常与输入配合使用：

<input 
  v-model.trim="username" 
  @keyup.enter="submit" 
  placeholder="输入用户名（自动去空格）"
/>

---

总结：推荐做法

场景	推荐方式
监听特定按键（如 Enter、Esc）	使用 @keyup.enter、@keyup.esc 等修饰符
监听组合键	@keyup.ctrl.enter、@keyup.alt.s
监听任意键	@keyup 或 @keydown + event.key 判断
全局快捷键	在 mounted 中绑定 document 事件，注意解绑
表单提交/搜索	@keyup.enter 触发操作

✅ 核心原则：
优先使用 Vue 的按键修饰符，语义清晰、代码简洁；
复杂场景结合原生 event 对象和全局事件监听。