Vue基础系列键盘事件

Posted 2022-03-03 勇敢*牛牛

和阿牛一起冲Vue

---

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年2月28日🌹
🆕最新更新时间：🎄2022年2月28日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！

文章目录

• 和阿牛一起冲Vue
• 前言
• 键盘事件
• 两种方式
• • 通过键盘修饰符
  • 通过Event事件
• 总结
• • 1.Vue中常用的按键别名：
  • 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
  • 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
  • 4.也可以使用keyCode去指定具体的按键（不推荐）
  • 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

---

前言

青春，因为奋斗与奉献更美丽。

---

键盘事件

通过获取键盘敲入的按钮，来实现某些需求

两种方式

通过键盘修饰符

<input type="text" placeholder="按下回车提示输入完成" @keyup.enter="showInfo">

======================================================================
 methods: 
            showInfo(Event) 
                // if (Event.keyCode !== 13) 
                //     return
                // 
                console.log(Event.target.value);
            
        

通过Event事件

methods: 
            showInfo(Event) 
                if (Event.keyCode !== 13) 
                    return
                
                console.log(Event.target.value);
            
        

总结

1.Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

• (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
• (2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键