木灵鱼儿

木灵鱼儿

阅读:196

最后更新:2022/08/20/ 0:32:23

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">

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

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 196

相关文章

目录树