22. Vue keycodes按键修饰符

22. Vue keycodes按键修饰符

需求

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

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

​​按键修饰符​​

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

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

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

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

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

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

​​按键码​​

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

使用 ​​keyCode​​ attribute 也是允许的：

为了在必要的情况下支持旧浏览器，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​​

类型：​​{ [key: string]: number | Array }​​默认值：​​{}​​用法：

Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "media-play-pause": 179, up: [38, 87]}

给 ​​v-on​​ 自定义键位别名。

对f2按钮自定义按钮修饰符

// 自定义按键修饰符 Vue.config.keyCodes = { f2: 113, };

上面设置好了​​f2​​按钮的别名之后，下面给监听事件设置修饰符即可，如下：

浏览器显示如下：

更多的按键码说明

在上面我们知道了​​113​​​是​​f2​​的按键码，那么还有更多的按键码呢？可以看下面的篇章查询。

​​js keycode键盘码​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。