Vue 按键修饰符

常用按键修饰符：enter【回车】、delete【删除】、esc【退出】、space【空格】、tab【缩进】、up【上】、down【下】、left【左】、right【右】 。

系统按键修饰符：ctrl、alt、shift、meta【四个小方块】 。

鼠标修饰符：left【左键】、right【右键】、middle【滚轮】 。

精准修饰符：exact?

语法格式:

// 按键修饰符
<input @keydown.按键名="函数">        // 按下按键执行
<input @keyup.按键名="函数">          // 松开按键执行
// 鼠标修饰符
<input @click.left="函数">            // 点击鼠标左键执行
<input @click.right="函数">           // 点击鼠标右键执行
<input @click.middle="函数">          // 点击鼠标滚轮执行
// 精准修饰符
<input @事件.修饰符.exact="函数">     // 不能多按或少按

常用按键修饰符:

<template>
  <p>enter 修饰符</p>
  <input type="text" placeholder="按回车键提交内容" @keyup.enter="info">
  <p>delete 修饰符</p>
  <input type="text" placeholder="按删除键或退格键提交内容" @keyup.delete="info">
  <p>esc 修饰符</p>
  <input type="text" placeholder="按退出键提交内容" @keyup.esc="info">
  <p>space 修饰符</p>
  <input type="text" placeholder="按空格键提交内容" @keyup.space="info">
  <p>tab 修饰符【特殊，必须配合 keydown 去使用】</p>
  <input type="text" placeholder="按换行键提交内容" @keydown.tab="info">
  <p>up 修饰符</p>
  <input type="text" placeholder="按上键提交内容" @keyup.up="info">
  <p>down 修饰符</p>
  <input type="text" placeholder="按下键提交内容" @keyup.down="info">
  <p>left 修饰符</p>
  <input type="text" placeholder="按左键提交内容" @keyup.left="info">
  <p>right 修饰符</p>
  <input type="text" placeholder="按左键提交内容" @keyup.right="info">
  <p>w 修饰符</p>
  <input type="text" placeholder="按 w 键提交内容" @keyup.w="info">
  <p>......</p>
</template>

<script setup>
const info = (e) => {
  console.log(e.target.value);
}
</script>

注：大部分按键都可以使用，多个单词的按键需要改名为短横线命名。例如：PrintScreen 按键需要改为 print-screen 才能使用（键盘上的 PrtSc 键）。

原创作者：吴小糖

创作时间：2023.12.14