重要参考：VUE官方迁移策略
弃用 KeyboardEvent.keyCode

问题出现

使用 时出现报错显示 ‘KeyboardEvent.keyCode’ modifier on ‘v-on’ directive

报错原因

VUE3版本：

  1. 不再支持使用 keyCodes (即键码) 作为 v-on 修饰符；
  2. 不再支持 config.keyCodes；

VU2 对 keyCodes 说明

Vue 2.x 中的 keyCodes 修饰符

在 Vue 2.x 中，允许使用 keyCodes 作为v-on 的修饰符：

1
2
3
4
5
<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />

上面两种写法，在 Vue 2.x 是等价的。

另外， 我们还可以通过全局的 config.keyCodes 选项来自定义 alias （别名）

1
2
3
4
5
6
7
8
9
Vue.config.keyCodes = {
  f1: 112	//快捷键
}

<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />

Vue3 弃用 keyCodes 说明

因为 Web 标准已经弃用 KeyboardEvent.keyCode
所以 Vue 3.x 为了和 Web 标准保持一致也不再支持 keyCodes。
Vue 3.x 建议使用按键 alias （别名）作为v-on的修饰符。

1
2
<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.delete="confirmDelete" />

因此，这也意味着config.keyCodes也被弃用了

Vue3 设置快捷键方法

设置快捷键比如 ctrl+s 这种,vue2: @keydown.ctrl.83
配置的代码可以写在 main.js 入口文件中，全局统一管理

vue3 不能使用 keyCode，只能使用按键别名。你为 keyCode=83 设置别名就行了

1
2
3
Vue.config.keyCodes = {
  s: 83
}

参考链接

  1. Vue 3 迁移策略笔记—— 第18节：按键修饰符
  2. Markdown设置居中和字体颜色
=================我是分割线=================

欢迎到公众号来唠嗑: