vue3 keyCode修饰符

vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的。

<input @keyup.13="submit" />

甚至我们还可以使用按钮别名alias的方式调用

<input @keyup.enter="submit" />

还可以全局自定义别名，通过Vue.config.keyCodes属性。

Vue.config.keyCodes = {
  f1: 112
}

随着ECMAScript的标准推荐，官方已经不推荐使用keyCode键码了，这个功能在js的官方定义上是一个已弃用的状态，最新的标准是使用KeyboardEvent.code，也就是具体字符的显示。

window.addEventListener("keydown", (event) => {
  console.log(event.key, event.code);
}, true);

当我按下字母Q的时候，输出：

Q KeyQ

所以，在vue3看来，支持keyCodes是没有意义的，于是它被移除了，取而代之的是使用键名来作为事件的修饰符来使用，于是Vue.config.keyCodes也被弃用了。

<input v-on:keyup.page-down="nextPage">

<input v-on:keypress.q="quit">

多个字符使用短横线链接。

但是有时候我们的字符是一个特殊的标点符号，那么在书写时可能会造成代码上的格式错误，所以针对标点符号的识别，官方建议是放在事件函数的内部去处理，而不是去使用修饰符。