Vue页面监听键盘按键的奇妙技巧

2023-09-11 07:03:51

Vue中监听键盘按键的指南

在Vue页面中监听键盘按键对于实现各种功能至关重要，从表单验证到游戏控制，再到快捷键功能。了解在Vue中监听键盘按键的不同方法，以及一些实用的技巧和示例，可以帮助你有效地实现这些功能。

方法

1. @keydown和@keyup指令

最常见的方法是使用@keydown和@keyup指令，分别监听键盘按下和抬起事件。这些指令触发相应的事件处理函数，允许你处理键盘输入。

<input type="text" @keydown="handleKeyDown" @keyup="handleKeyUp">

export default {
  methods: {
    handleKeyDown(event) {
      console.log('KeyDown:', event.key);
    },
    handleKeyUp(event) {
      console.log('KeyUp:', event.key);
    },
  }
};

2. $on方法

$on方法是一种更灵活的方法，它允许你监听任何类型的事件，包括键盘事件。它接收一个事件名称和一个回调函数作为参数。

<input type="text">

export default {
  mounted() {
    this.$on('keydown', event => {
      console.log('KeyDown:', event.key);
    });
    this.$on('keyup', event => {
      console.log('KeyUp:', event.key);
    });
  }
};

3. v-on指令

v-on指令提供了另一种监听键盘事件的方式。它可以绑定任何类型的事件处理函数，包括键盘事件。

<input type="text" v-on:keydown="handleKeyDown" v-on:keyup="handleKeyUp">

export default {
  methods: {
    handleKeyDown(event) {
      console.log('KeyDown:', event.key);
    },
    handleKeyUp(event) {
      console.log('KeyUp:', event.key);
    },
  }
};

技巧和示例

使用event.key获取按键名称。
使用event.code获取按键代码。
使用组合键修饰符（如.enter、.ctrl、.shift）来监听组合键。
使用$once方法只监听键盘事件一次。
使用preventDefault()方法阻止默认行为（如阻止表单提交）。
使用stopPropagation()方法阻止事件冒泡。

示例：

<template>
  <div @keydown.enter="handleEnter">
    <input type="text" />
  </div>
</template>

<script>
export default {
  methods: {
    handleEnter(event) {
      console.log('Enter pressed!');
    },
  },
};
</script>