vue监听键盘事件

### Vue3 中实现键盘事件监听 在 Vue3 中，可以通过多种方式实现在组件内监听键盘事件的功能。下面展示两种常见的方式。 #### 使用 `@keyup` 或者 `@keydown` 模板指令绑定事件处理器 通过模板内的 v-on 指令可以方便地为 DOM 绑定事件监听器。这里给出一个简单的例子，当按下特定键时更改页面上的计数器数值： ```html <script setup> import { ref, onMounted, beforeUnmount } from 'vue' const keyCounter = ref({ ArrowUp: 0, ArrowDown: 0 }) function handleKeydown(event) { switch (event.key) { case "ArrowUp": keyCounter.value.ArrowUp += 1; break; case "ArrowDown": keyCounter.value.ArrowDown += 1; break; } } // 添加全局事件监听器 onMounted(() => window.addEventListener('keydown', handleKeydown)) // 移除全局事件监听器以防内存泄漏 beforeUnmount(() => window.removeEventListener('keydown', handleKeydown)) </script> <template> <button @click="keyCounter.ArrowUp++">Simulate Up Key Press</button> <button @click="keyCounter.ArrowDown++">Simulate Down Key Press</button> <p>Up arrow pressed {{ keyCounter.ArrowUp }} time(s).</p> <p>Down arrow pressed {{ keyCounter.ArrowDown }} time(s).</p> </template> ``` 此代码片段展示了如何利用 `ref()` 创建响应式的数据属性，并且使用 `onMounted` 和 `beforeUnmount` 生命周期钩子来管理事件监听器的添加与移除[^1]。 #### 结合计算属性和样式动态调整界面状态 另一个更复杂的案例涉及到了根据不同的按键改变整个网页背景的颜色。这通常涉及到定义一组预设好的颜色映射表以及相应的处理逻辑。如下所示： ```html <script setup> import { ref, reactive, computed, onMounted, beforeUnmount } from 'vue'; let currentColor = ref('#ffffff'); const colorKeys = reactive({ a: '#ffcccc', s: '#ccffff', d: '#d9bfff' }); function changeBackgroundColor(event){ let newColor = colorKeys[event.key]; if(newColor !== undefined){ currentColor.value = newColor; } } onMounted(() => document.body.style.backgroundColor = currentColor.value); onMounted(() => addEventListener('keydown', changeBackgroundColor)); beforeUnmount(() => removeEventListener('keydown', changeBackgroundColor)); </script> <style scoped> body{ transition: background-color .5s ease-in-out; } </style> <template> <div :style="{ backgroundColor: currentColor}"> <h2 style="text-align:center;">Press A/S/D to Change Background Color!</h2> </div> </template> ``` 上述示例不仅实现了基于按键输入修改页面样式的功能，还加入了 CSS 过渡效果使得视觉变化更加平滑自然[^2]。