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>