背景
- 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。
| keyCode |
实际键值 |
| click |
keypress |
| 48到57 |
0到9 |
| 65到90 |
a到z（A到Z） |
| 112到135 |
F1到F24 |
| 8 |
BackSpace（退格） |
| 9 |
Tab |
| 13 |
Enter（回车） |
| 20 |
Caps_Lock（大写锁定） |
| 32 |
Space（空格键） |
| 37 |
Left（左箭头） |
| 38 |
Up（上箭头） |
| 39 |
Right（右箭头） |
| 40 |
Down（下箭头） |
方案
- 在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配
keyCode，直接使用别名就能监听按键的事件
<input @keyup.enter="function">
| 别名 |
实际键值 |
| .delete |
delete（删除）/BackSpace（退格） |
| .tab |
Tab |
| .enter |
Enter（回车） |
| .esc |
Esc（退出） |
| .space |
Space（空格键） |
| .left |
Left（左箭头） |
| .up |
Up（上箭头） |
| .right |
Right（右箭头） |
| .down |
Down（下箭头） |
| .ctrl |
Ctrl |
| .alt |
Alt |
| .shift |
Shift |
| .meta |
(window系统下是window键，mac下是command键) |
| 组合写法 |
按键组合 |
| @keyup.alt.67=”function” |
Alt + C |
| @click.ctrl=”function” |
Ctrl + Click |
注意
- 但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：
<el-input
v-model="inputName"
placeholder="搜索你的文件"
@keyup.enter.native="searchFile(params)"
>
</el-input>
- 如果遇到
.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。
