Vue按键修饰符的用法（附带实例）

当需要对键盘按键进行监听时，我们通常使用 keyup 这个参数，如果只是对某个按键进行监听，可以通过 Event 对象来进行判断，例如要监听用户按了 Enter 键，方法如下：

keyup(event) {
  console.log("键盘按键抬起");
  if (event.key === 'Enter') {
    console.log("Enter 键被单击");
  }
}

在 Vue 中，还有一种更加简单的方式可以实现对某个具体的按键的监听，即使用按键修饰符，在绑定监听方法时，我们可以设置要监听的具体按键，例如：

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

需要注意，修饰符的命名规则与 Event 对象中属性 key 值的命名规则略有不同，Event 对象中的属性采用的是大写字母驼峰法，如 Enter、PageDown，在使用按键修饰符时，我们需要将其转换为中画线驼峰法，如 enter、page-down。

Vue 中还提供了一些特殊的系统按键修饰符，这些修饰符是配合其他键盘按键或鼠标按键使用的，主要有 4 种：ctrl、alt、shift 和 meta。

这些系统修饰键的功能是只有当用户按下这些键时，对应的键盘或鼠标事件才能触发，在处理组合键指令时经常会用到，例如：

<div @mousedown.ctrl="mousedown">鼠标按下</div>

上述代码的功能是，只有在用户同时按下键盘上的 Ctrl 键和鼠标按钮时，才会触发绑定的事件函数。

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

上述代码的功能是：只有在用户同时按下 Alt 键和 Enter 键时，才会触发绑定的事件函数。

还有一个细节需要注意，即在 Vue 中使用系统修饰符时的行为。以鼠标按下事件为例，只要满足用户在按下鼠标按键的同时按下 Ctrl 键，事件就会被触发。即使用户同时按下其他键（如 Shift 键），也不会影响事件的触发。例如，使用“Shift+Ctrl+鼠标左键”组合键时，事件同样会被触发。

但是，如果我们想要更精准地控制按键修饰，可以使用 .exact 修饰符。使用这个修饰符后，事件只有在完全满足指定的按键条件时才会被触发。例如：

<div @mousedown.ctrl.exact="mousedown">鼠标按下</div>

使用 exact 修饰符后，如果用户使用“Shift+Control+鼠标左键”组合键进行操作，不会再触发事件函数。

注意，Meta 系统修饰键在不同的键盘上表示不同的按键，在 Mac 键盘上表示 Command 键，在 Wimdows 系统上对应 Windows 徽标键。

前面介绍了键盘按键相关的修饰符，Vue 中还有 3 个常用的鼠标按键修饰符。在进行网页应用的开发时，通常左键用来选择，右键用来进行配置，通过以下修饰符可以设置当用户单击了鼠标指定的按键后才会触发事件函数：left、right 和 middle。

例如，下面的示例代码，只有单击了鼠标左键才会触发事件：

<div @click.left="click">单击事件</div>

Vue按键修饰符的用法（附带实例）

相关文章