需求
在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用「按键修饰符」来指定按下的键盘按钮。
下面来看看另一个需求来逐步认识一下按钮修饰符。
按键修饰符[1]
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。
下面来完成一下列表操作中的数据添加操作，如下：
这时候只要按下键盘的enter按钮，那么则会执行add方法，执行添加数据，如下：
除了enter这个常用的按键码，还有更多的按键我们需要知道的，如下。
按键码[2]
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode attribute 也是允许的：
<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
-
.enter -
.tab -
.delete(捕获“删除”和“退格”键) -
.esc -
.space -
.up -
.down -
.left -
.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
自定义按键修饰符别名
对于一些上面112 这样难以记住的按键符号，可以通过自定义别名来进行记录。
keyCodes[3]
-
「类型」：
{ [key: string]: number | Array<number> } -
「默认值」：
{} -
「用法」：
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用双引号括起来
"media-play-pause": 179,
up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">
给 `v-on` 自定义键位别名。对f2按钮自定义按钮修饰符
// 自定义按键修饰符
Vue.config.keyCodes = {
f2: 113,
};
上面设置好了f2按钮的别名之后，下面给监听事件设置修饰符即可，如下：
浏览器显示如下：
更多的按键码说明
在上面我们知道了113是f2的按键码，那么还有更多的按键码呢？可以看下面的篇章查询。
js keycode键盘码
Reference
按键修饰符: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
[2]
按键码: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
[3]
keyCodes: https://cn.vuejs.org/v2/api/#keyCodes
交流QQ群：
点击下面，查看更多Vue系列文章
原文始发于微信公众号（海洋的渔夫）：18. Vue keycodes按键修饰符
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/32083.html
