Element-ui vue 键盘快捷键事件

公司项目有一个这样的需求，是一个后台管理系统，然后点击一个按钮，显示对应的弹窗，有的人会说，那直接给个点击事件不就好了嘛
话虽如此，奈何我们的技术总监的想法有些秀，虽然不懂，操作者会不会记住这么多的快捷键，但是秀还是要滴。

话不多说，直接上代码了哦~

接下来，我先说一下input 绑定键盘事件。

<input type="text"  @keyup.enter="SearchText" v-model="text" placeholder="请输入搜索信息"/>

@keyup.enter=“SearchText” 输入文本后点击【回车】执行的方法。

没错，直接在input上这么写就好啦。

keyCode	实际键值
48到57	0到9
65到90	a到z（A到Z）
112到135	F1到F24
8	BackSpace（退格）
9	Tab
20	Caps_Lock（大写锁定）
32	Space（空格键）
37	Left（左箭头）
37	Up（上箭头）
39	Right（右箭头）
40	Down（下箭头）

如果不够用的话
那么上代码

document.onkeydown = function(e) {
   //e.keyCode 输出的值就是键值啦
   console.log(e.keyCode);
}

当然啦，vue也对键值也做了一些别名，简单便捷并且不用配置键值了

别名	实际键值
.delete	delete（删除）/BackSpace（退格）
.tab	Tab
.enter	Enter（回车）
.esc	Esc（退出）
.space	Space（空格键）
.left	Left（左箭头）
.up	Up（上箭头）
.right	Right（右箭头）
.down	delete（删除）/Down（下箭头）
.ctrl	delete（删除）/Ctrl
.alt	delete（删除）/Alt
.shift	delete（删除）/Shift
.meta	(window系统下是window键，mac下是command键)

当然啦，还有我们的组合写法

组合写法	按键组合
@keyup.alt.67=”function”	Alt + C
@click.ctrl=”function”	Ctrl + Click

呐，用法也是非常简单

<input type="text"  @keyup.enter="SearchText" v-model="text" placeholder="请输入搜索信息"/>
<input type="text"  @keydown.enter="SearchText" v-model="text" placeholder="请输入搜索信息"/>
<input type="text"  @keyup.67="SearchText" v-model="text" placeholder="请输入搜索信息"/>

那会有小伙伴遇到那种，不是input的按键操作
当然也有啦

created: function() {
       document.addEventListener('keydown',this.handleEvent)
},
methods: {
	handleEvent(e){
       var that = this;
        //alt+F  
        let key = window.event.keyCode;  
        if (70 == e.keyCode && e.altKey){
            //如果是Alt+F 的操作的话，方法执行与此
        }
    },
},
beforeDestroy(){
   document.removeEventListener('keydown', this.handleEvent);
}

补充说明

1.键盘按下事件：keydown() 是在键盘按下就会触发
2.键盘弹起事件：keyup() 是在键盘松手就会触发