Vue 3 按键修饰符

在 Vue 3 中，你可以使用按键修饰符来监听键盘事件，并执行相应的事件处理函数。按键修饰符可以帮助你更精确地控制用户与你的应用程序的交互。

以下是一些常用的按键修饰符和它们对应的功能：

按键修饰符	功能
.enter	回车键
.tab	Tab 键
.delete	删除键或退格键
.esc	Escape 键
.space	空格键
.up	上箭头键
.down	下箭头键
.left	左箭头键
.right	右箭头键
.ctrl	Control 键
.alt	Alt 键
.shift	Shift 键
.meta	Meta/Command/Windows 键（通常是 Command 键在 macOS 上，Windows 键在 Windows 上）
.exact	精确匹配修饰符，确保修饰符和按键完全匹配

这些修饰符可以与 @keyup 或 @keydown 等事件监听器一起使用，以监听特定键盘事件，并执行相应的操作。

以下是一段示例代码，当用户按下回车键时，触发一个事件处理函数：

<template>
  <input @keyup.enter="handleEnterKey"/>
  <p>{{ message }}</p>
</template>

<script setup>
  import { ref } from 'vue';

  const message = ref('')

  // 回车键对应事件
  const handleEnterKey = () => {
    message.value = '您按了回车键了'
  }

</script>

在上面的示例中，我们使用 @keyup.enter 修饰符监听了回车键的事件，当用户在输入框中按下回车键时，handleEnterKey 方法将会被触发，从而改变页面上的消息。这是一个简单的示例，展示了如何使用按键修饰符 enter 来监听回车键的事件，效果图如下：

监听回车键