Vue 3 按键修饰符

更新时间 2023-09-27 22:26:41

在 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 来监听回车键的事件，效果图如下：

监听回车键