需求
在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup
事件,并且还要使用按键修饰符来指定按下的键盘按钮。
下面来看看另一个需求来逐步认识一下按钮修饰符。
![13423234-2af0dd9bae133fa5.png](https://i-blog.csdnimg.cn/blog_migrate/3a0994558592551033413ece2cbfa554.png)
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。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
时被调用。
下面来完成一下列表操作中的数据添加操作,如下:
![13423234-f597478e95d61893.png](https://i-blog.csdnimg.cn/blog_migrate/99c312d82ee912d0fe680fd0737fa424.png)
这时候只要按下键盘的enter
按钮,那么则会执行add
方法,执行添加数据,如下:
![13423234-efd473751b4b9373.png](https://i-blog.csdnimg.cn/blog_migrate/b3bcc7afef8b54597036c5de5f9751a8.png)
除了enter
这个常用的按键码,还有更多的按键我们需要知道的,如下。
按键码
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
类型:
{ [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按钮自定义按钮修饰符
![13423234-8d56ed66a6784341.png](https://i-blog.csdnimg.cn/blog_migrate/945487bbbd52b2c3b5d43001fa982d78.png)
// 自定义按键修饰符
Vue.config.keyCodes = {
f2: 113,
};
上面设置好了f2
按钮的别名之后,下面给监听事件设置修饰符即可,如下:
![13423234-1589735e0e7e694d.png](https://i-blog.csdnimg.cn/blog_migrate/3032614839757c6fee8946e96a2ae85d.png)
浏览器显示如下:
![13423234-2b70249b0b711091.png](https://i-blog.csdnimg.cn/blog_migrate/6e8c4a0e6f36ec37d8330d1cf148c0d8.png)
更多的按键码说明
在上面我们知道了113
是f2
的按键码,那么还有更多的按键码呢?可以看下面的篇章查询。
![13423234-0e3934319aa622f6.png](https://i-blog.csdnimg.cn/blog_migrate/d4bb07c9de6f529f6960b19e3d40165d.png)