前言

本笔记主要基于官方文档《迁移策略—— 按键修饰符》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。

知识储备

概述

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

Vue 2.x 中的 keyCodes 修饰符

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

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

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

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

另外, 我们还可以通过全局的 config.keyCodes 选项来自定义 alias (别名)。

Vue.config.keyCodes = {
  f1: 112
}
<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

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

Vue 3.x 弃用 keyCodes

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

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

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


本系列目录

Logo

前往低代码交流专区

更多推荐