vue的按键修饰符 Vue 3.0 按键修饰符

2023-02-23 20:17 VUE3教程

vue的按键修饰符

Vue 按键修饰符是 Vue.js 为按键事件提供的特殊语法，可以将特定的键盘事件绑定到相应的 Vue 方法上。它们可以用在 v-on 属性中，也可以用在由 v-on 创建的组件方法中。

Vue 提供了多个按键修饰符，包括 .enter、.tab、.delete、.esc、.space、.up、.down 等。这些修饰符允许你直接将特定的键盘事件绑定到一个方法上，而不必使用 JavaScript 中冗余的 keyCode 属性来检测特定的按键是否被按下。

// 例如：当用户在  中敲击回车时触发一个方法

此外，Vue 还允许你使用修饰符来监听系统保留字（如 Alt 、 Ctrl 、 Shift 和 Meta ）的组合键。这样就可以在不同浏览器之间得到一致性表现。

// 例如：当用户按下 Ctrl+C 时触发一个方法

以下是变更的简要总结：

在 Vue 2 中，支持 keyCodes 作为修改 v-on 方法的方法。

<!-- 键码版本 -->
<input v-on:keyup.13="submit" />


<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />

此外，你可以通过全局 config.keyCodes 选项。

Vue.config.keyCodes = {
  f1: 112
}

<!-- 键码版本 -->
<input v-on:keyup.112="showHelpText" />


<!-- 自定别名版本 -->
<input v-on:keyup.f1="showHelpText" />

从KeyboardEvent.keyCode has been deprecated 开始，Vue 3 继续支持这一点就不再有意义了。因此，现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 大小写名称。

<!-- Vue 3 在 v-on 上使用 按键修饰符 -->
<input v-on:keyup.delete="confirmDelete" />

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

对于那些在代码库中使用 keyCode 的用户，我们建议将它们转换为它们的 kebab-cased (短横线) 命名对齐。

阅读全文