Vue-自定义按键修饰符

Vue键盘修饰符

在监听键盘事件时，经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件,这里列出Vue所有的内置按键修饰符别名：

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

<input @keyup.enter="submit">

自定义全局按键修饰符别名：

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

系统辅助按键：（仅在系统辅助按键按下时，监听的事件才会执行）

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>

JS键盘码：

数字值 实际键值
48到57 0到9
65到90 a到z（A到Z）
112到135 F1到F24
8 BackSpace（退格）
9 Tab
13 Enter（回车）
20 Caps_Lock（大写锁定）
32 Space（空格键）
37 Left（左箭头）
38 Up（上箭头）
39 Right（右箭头）
40 Down（下箭头）
JS组合键：
if ((window.event.ctrlKey)&&(window.event.keyCode==49))
alert(“您按下了CTRL＋1键”);