Vue3中的按键别名
原创
tips：
- 在Vue3中，按键事件可以使用按键别名方式指定某一种按键生效
- 按键别名的使用方式和修饰符一样，放到按键事件后面
- 常用的按键别名有8种，enter,tab,esc,delete,space,up,down,left,right
- 按键别名可以多个同时使用，在后面继续追加即可
example：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="michael">
<input @keydown.tab.enter.delete.esc.space="a" /> <!--按键别名enter,tab,DEL都会起作用-->
</div>
<script>
//enter----回车
//tab------tab
//delete---删除键
//esc------esc
//space----空格
Vue.createApp({
"methods":{
a(){
alert(1);
}
}
}).mount("#michael")
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
