05-Vue_键盘修饰符

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。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 时被调用。

内置按键码

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

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

使用按键码别名可以做到兼容：
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

按键修饰符

自定义修饰符

• 查看键盘事件对应的键码

window.onkeyup = (e)=>{console.log(e.keyCode)}

• 这样子也可以使用，但是不方便

<input type="text" placeholder="按下F2" @keyup.113="total++" />

• 自定义键盘修饰符的方式

1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

Vue.config.keyCodes.f2 = 113;

1. 使用自定义的按键修饰符：

<input type="text" v-model="name" @keyup.f2="total++">