Vue 中如何使用按键修饰符 (如：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right)？

推荐答案

在 Vue 中，可以使用按键修饰符来监听特定的键盘事件。以下是一些常见的按键修饰符及其用法：

// www.javascriptcn.com code example
<template>
  <div>
    <!-- 监听回车键 -->
    <input @keyup.enter="onEnter" placeholder="按下回车键触发" />

    <!-- 监听 Tab 键 -->
    <input @keyup.tab="onTab" placeholder="按下 Tab 键触发" />

    <!-- 监听删除键 -->
    <input @keyup.delete="onDelete" placeholder="按下删除键触发" />

    <!-- 监听 Esc 键 -->
    <input @keyup.esc="onEsc" placeholder="按下 Esc 键触发" />

    <!-- 监听空格键 -->
    <input @keyup.space="onSpace" placeholder="按下空格键触发" />

    <!-- 监听方向键 -->
    <input @keyup.up="onUp" placeholder="按下上方向键触发" />
    <input @keyup.down="onDown" placeholder="按下下方向键触发" />
    <input @keyup.left="onLeft" placeholder="按下左方向键触发" />
    <input @keyup.right="onRight" placeholder="按下右方向键触发" />
  </div>
</template>

<script>
export default {
  methods: {
    onEnter() {
      console.log('回车键被按下');
    },
    onTab() {
      console.log('Tab 键被按下');
    },
    onDelete() {
      console.log('删除键被按下');
    },
    onEsc() {
      console.log('Esc 键被按下');
    },
    onSpace() {
      console.log('空格键被按下');
    },
    onUp() {
      console.log('上方向键被按下');
    },
    onDown() {
      console.log('下方向键被按下');
    },
    onLeft() {
      console.log('左方向键被按下');
    },
    onRight() {
      console.log('右方向键被按下');
    }
  }
};
</script>

本题详细解读

按键修饰符的作用

按键修饰符是 Vue 提供的一种便捷方式，用于监听特定的键盘事件。通过按键修饰符，可以简化代码，避免在事件处理函数中手动判断按键的键码。

常见的按键修饰符

• .enter：监听回车键（Enter）。
• .tab：监听 Tab 键。
• .delete：监听删除键（Delete 或 Backspace）。
• .esc：监听 Esc 键。
• .space：监听空格键（Space）。
• .up：监听上方向键（↑）。
• .down：监听下方向键（↓）。
• .left：监听左方向键（←）。
• .right：监听右方向键（→）。

使用方法

在 Vue 模板中，可以通过 @keyup 或 @keydown 事件监听键盘事件，并使用按键修饰符来指定具体的按键。例如：

<input @keyup.enter="onEnter" />

当用户在输入框中按下回车键时，onEnter 方法将被调用。

自定义按键修饰符

除了 Vue 内置的按键修饰符，还可以通过 Vue.config.keyCodes 自定义按键修饰符。例如：

Vue.config.keyCodes = {
  f1: 112,
  f2: 113,
  // 其他自定义按键
};

然后可以在模板中使用自定义的按键修饰符：

<input @keyup.f1="onF1" />

注意事项

• 按键修饰符只能用于 @keyup 和 @keydown 事件。
• 按键修饰符是大小写敏感的，例如 .enter 和 .Enter 是不同的。
• 如果需要监听多个按键，可以使用链式修饰符，例如 @keyup.ctrl.enter。