vue 中的按键事件

一. 按键别名

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

Vue 提供了绝大多数常用的按键码的别名：

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

同时可以通过全局 config.keyCodes 对象修改别名的方法：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

二. 基本语法

1. 单键

keydown 是在键盘按下就会触发
keyup 是在键盘松手就会触发

<input @keyup.enter="submit"> // 回车键事件

如果用了封装组件的话，比如element-ui，这个时候需要加 .native

比如：

<el-input @keyup.enter.native="submit()"></el-input>

2. 组合键

系统修饰键：仅在按下相应按键时才触发鼠标或键盘事件

• .ctrl
• .alt
• .shift
• .meta (windows: win键 / mac: command键 )

// alt + c
<input v-on:keyup.alt.67="clear">

// ctrl + click
<div v-on:click.ctrl="doSomething">Do something</div>

在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态, 例如 alt + c 必须在 alt 按下的情况下按 c 才能触发