Vue 3 按键修饰符

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

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 1v1 提问 / 学习打卡 / 每月赠书活动

目前, 星球 内第2个项目《仿小红书(微服务架构)》正在更新中。第1个项目:全栈前后端分离博客项目2期已经完结,演示地址:http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 288 小节,累计 45w+ 字,讲解图:2012 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1600+ 小伙伴加入,欢迎点击围观

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

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

按键修饰符功能
.enter回车键
.tabTab 键
.delete删除键或退格键
.escEscape 键
.space空格键
.up上箭头键
.down下箭头键
.left左箭头键
.right右箭头键
.ctrlControl 键
.altAlt 键
.shiftShift 键
.metaMeta/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 来监听回车键的事件,效果图如下:

监听回车键监听回车键