学习Vue 02-19 使用按键代码修改器检测键盘事件

19 使用按键代码修改器检测键盘事件

While event modifiers are for interfering with the event propagation flow, key modifiers help detect special keys of keyboard events such as keyup, keydown, and keypress.

事件修改器用于干扰事件传播流，而按键修改器则有助于检测键盘事件的特殊按键，如按键上移、按键下移和按键下压。

Usually, to detect a specific key, we need to perform two steps:

Identify the key code, key, or the code represented by that key. For instance, the keyCode for Enter is 13, its key is "Enter", and its code is "Enter."
When firing the event handler, within the handler, we need to check manually that event.keyCode (or event.code or event.key) matches the target key code.

通常，要检测一个特定的密钥，我们需要执行两个步骤：

识别按键代码、按键或该按键所代表的代码。例如，Enter 的 keyCode 是 13，它的键是 "Enter"，它的代码是 "Enter"。
在启动事件处理程序时，我们需要在处理程序中手动检查 event.keyCode（或 event.code 或 event.key）是否与目标按键代码相匹配。

This approach is not efficient for maintaining reusable and clean code in a large codebase. v-on comes with built-in key modifiers as a better alternative. If we want to detect if the user types the Enter key, we add the modifier .enter to the related keydown event, following the same syntax when using event modifiers.

v-on 内置的按键修饰符是一种更好的替代方法。如果我们要检测用户是否键入了 Enter 键，我们可以在相关的按键事件中添加修饰符 .enter，并遵循使用事件修饰符时的相同语法。

Let's assume we have an input element, and we log a message to the console whenever a user presses Enter, as seen in Example 2-10.

假设我们有一个输入元素，每当用户按下 Enter 键，我们就会向控制台记录一条信息，如例 2-10 所示。

html 复制代码

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      if (e.keyCode === '13') {
        console.log('User pressed Enter!')
      }
    }
  }
}
</script>
<template>
  <input @keydown="onEnter">
</template>

We now can rewrite it using @keydown.enter.

现在我们可以使用 @keydown.enter 重写它。

Example 2-11. Checking for Enter key pressed by @keydown.enter modifier.

例 2-11. 检查 @keydown.enter 修改器是否按下 Enter 键。

html 复制代码

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.enter="onEnter">
</template>

The app behaves the same in both cases.

在这两种情况下，应用程序的行为都是一样的。

A few other commonly used key modifiers are .tab, .delete, .esc, and .space.

其他一些常用的按键修饰符包括 .tab、.delete、.esc 和 .space。

Another popular use case is to capture a special keys combination, such as Ctrl & Enter (CMD & Enter for MacOS) or Shift + S. In these scenarios, we chain the system key modifiers (.shift, .ctrl, .alt and .meta for CMD key in MacOS) with key code modifiers, as in the following example:

在这些情况下，我们将系统按键修饰符（.shift、.ctrl、.alt 和 MacOS 中 CMD 键的 .meta）与按键代码修饰符进行连锁，如下例所示：

html 复制代码

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.ctrl.enter="onEnter">
</template>

Or chaining the shift modifier and key code modifier for S key (keyCode is 83):

或者将 shift 修改器和 S 键（keyCode 为 83）的键代码修改器连锁使用：

html 复制代码

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.shift.s="onEnter">
</template>

Also, to capture the exact key combinations for triggering an event, we use the .exact modifier:

此外，为了捕捉触发事件的准确组合键，我们使用了 .exact 修饰符：

html 复制代码

<button @click.shift.exact="onShiftEnter" />

Combining .shift and .exact makes sure the click event fires when the user presses only the Shift key while clicking the button.

将 .shift 和 .exact 结合使用，可确保用户在点击按钮时只按下 Shift 键，从而触发点击事件。