Vue3教程 - 10 键盘修饰符

如果有需求想在一个文本框输入完成后， 点击回车键就实现提交功能，则需要监听键盘按键。

在 Vue 中，键盘修饰符（Key Modifiers）是一种非常方便的方式来监听键盘事件时指定特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

10.1 键盘按键修饰符

当输入完密码，点击回车的时候，就触发登录方法。

<!-- 结构 -->
<template>
    <div id="root">
        <!-- 仅在 key 为 Enter 时调用 login -->
        密码: <input type="password" v-model="password" @keyup.enter="login">
    </div>
</template>

<!-- setup -->
<script lang="ts" setup>
import { ref } from 'vue';

let password = ref('');

function login() {
    console.log('登录');
}

</script>

在上面的代码中，@keyup.enter 中的 @keyup 表示按键抬起，.enter 表示回车键，所以@keyup.enter 表示回车键抬起时触发事件调用 login 方法。

注意，光标要在密码输入框点击回车才有效。

Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

还可以使用组合键：

密码: <input type="password" v-model="password" @keyup.ctrl.enter="login">

当用户按下 Ctrl + Enter 组合键时，将会调用 login 方法。

.ctrl
.alt
.shift
.meta  // meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。