常用按键修饰符：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 键）。
