Vue按键修饰符，鼠标按钮修饰符，系统修饰键

在一些搜索框中，我们需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。

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

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

• 示例
  准备方法

 showInfo(e){
    // key是按键名字，keyCode是按键的编码
    console.log(e.key,e.keyCode)
    // 输入框的值
    // console.log(e.target.value)
 }

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

<input type="text" placeholder="拾起左箭头提示输入" @keyup.left = "showInfo">

删除 => delete (捕获“删除”和“退格”键)

 <input type="text" placeholder="按下删除提示输入" @keyup.delete = "showInfo">

tab (特殊，必须配合keydown去使用)

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

2.Vue未提供别名的按键

查看未提供别名的一些按键

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

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

 <input type="text" placeholder="按下CapsLock提示输入" @keydown.caps-lock = "showInfo">

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

meta键也叫win键，就是能打开windows菜单的键
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

• 示例

<input type="text" placeholder="按下ctrl提示输入" @keyup.ctrl = "showInfo">

可以看出，事件不触发

(2).配合keydown使用：正常触发事件。

• 示例

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

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

可以使用keyCode去指定具体的按键（不推荐），因为不同电脑的按键code可能不同

<input type="text" placeholder="按下tab提示输入" @keydown.9 = "showInfo">

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

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

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

 showInfo(e){
    console.log(e.key,e.keyCode)
   }