【Vue | 补洞 | 06】绑定键盘事件

  五个常用的键盘事件，方便用户操作！本文讲解Vue自带的键盘事件、及自定义键盘事件的使用。
  欢迎持续关注新系列文章 [Vue 补洞] 系列，用久了 Vue2 总有一些遗漏的知识点，通过该系列文章一起查漏补缺！

一、Vue 自带的键盘事件

1、Vue 常用的键盘事件

• enter
• esc
• tab
• delete
• space

2、keyup 与 keydown

• keyup：按下按键并抬起后触发
• keydown：按下按键时立刻触发

3、使用

绑定按键时，既可以绑定按键名称，也可以绑定按键编码

1）按键单词为单个时

<!-- 推荐用法 -->
<input @keyup.enter="xxx">

<!-- 可用，但已被标准废弃 -->
<input @keyup.13="xxx">

2）按键单词为多个时

  使用小横线进行单词间的连接

<input @keyup.caps-lock="xxx">

4、获取按下的按键

<input @keyup.enter="event">

event(e) {
	console.log(e.key) // 按键名称：enter 
 	console.log(e.keyCode) // 按键编码：13
}

5、系统修饰键

​ 配合 keyup 使用：按下修饰键的同时，必须 要按下其他任意键；之后 释放其他任意键后，事件才触发。（如 @keyup.ctrl表示：按下 ctrl+任意键，抬起该任意键后才触发事件）

​ 配合 keydown 使用：按下修饰键立即触发事件（如 @keydown.ctrl 表示：按下 ctrl 立即触发事件）

• ctrl
• shift
• alt
• meta

二、自定义键盘事件

1、定义及使用

Vue.config.keycodes.自定义键名 = 键码

// 示例如：
Vue.config.keycodes.jokerls = 13
<input @keyup.jokerls="xxx">

三、总结

• 使用 keyup 和 keydown，可以绑定键盘上的按键事件
• 修饰键与普通键不同
  • 修饰键在配合 keyup 时必须 同时按下其他键；配合 keydown 时可以单独按下触发
  • 普通键均可单独按下触发
• 注意 tab 键本身有 切换焦点 的功能，故该方法需要用 keydown 才能生效，不能用 keyup
• 注意 绑定键盘事件时，尽量使用 按键名字 绑定，少用 keycode 进行绑定（原因在于现在键盘花样众多，不同键盘的 keycode 代表的可能是不一样的按键）