Vue 事件处理操作实例详解

2020-06-14 06:25:16易采站长站整理

5 按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为

v-on
在监听键盘事件时添加按键修饰符:


<!--keyCode 为 13 时调用 vm.submit()-->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:


<!--使用按键别名-->
<input v-on:keyup.enter="submit">
<!--使用缩写语法-->
<input @keyup.enter="submit">

全部的按键别名:

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以通过全局

config.keyCodes
对象自定义按键修饰符别名:


//自定义按键的修饰符别名
Vue.config.keyCodes.f1 = 112;

自动匹配按键修饰符

2.5.0 新增

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


<input @keyup.page-down="onPageDown">

在上面的例子中,处理函数仅在

$event.key === 'PageDown'
时被调用。

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,它们的内置别名应该是首选。

6 系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。


<!--Alt + C-->
<input @keyup.alt.67="clear">
<!--Ctrl + Click-->
<div @click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同,在和

keyup
事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住
ctrl
的情况下释放其它按键,才能触发
keyup.ctrl