vue 码源 键盘快捷键操作_18. Vue keycodes按键修饰符

需求

在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用「按键修饰符」来指定按下的键盘按钮。

下面来看看另一个需求来逐步认识一下按钮修饰符。

按键修饰符[1]

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

下面来完成一下列表操作中的数据添加操作，如下：

这时候只要按下键盘的enter按钮，那么则会执行add方法，执行添加数据，如下：

除了enter这个常用的按键码，还有更多的按键我们需要知道的，如下。

按键码[2]

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space