KeyCode 修饰符
重大变更

概述

以下是变更的简要概述

在 Vue 2 中，keyCodes 作为修改 v-on 方法的一种方式得到支持。

html

<!-- keyCode version -->
<input v-on:keyup.13="submit" />

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

此外，您可以通过全局 config.keyCodes 选项定义自己的别名。

Vue.config.keyCodes = {
  f1: 112
}

html

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

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

由于 KeyboardEvent.keyCode 已被弃用，因此 Vue 3 继续支持它不再有意义。因此，现在建议对您要作为修饰符使用的任何键使用 kebab-case 名称。

html

<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.page-down="nextPage">

<!-- Matches both q and Q -->
<input v-on:keydown.q="quit">

因此，这意味着 config.keyCodes 现在也已弃用，并且不再受支持。

对于在代码库中使用 keyCode 的用户，我们建议将其转换为其 kebab-cased 命名的等效项。

某些标点符号的键可以直接包含在内。例如，对于 , 键

html

<input v-on:keydown.,="commaPress">

语法的限制阻止了某些字符的匹配，例如 "、'、/、=、> 和 .。对于这些字符，您应该在监听器中检查 event.key。