上回书说到怎么在vue.js中添加bootstrap样式，这次来写一下键盘按键指令吧～
一、先来说一下vue.js本来就有的按键指令吧～
这个就灰常的简单和方便啦～
1、随便找一个vue页面文件，在<template>标签里写一个测试用的输入框
<div><input type="text" @keyup.13="showDialog()"></div>
哇～这个代码的样式就都是这么丑的吗？！我选了半天就选不到一个好看的！
好吧，我要冷静，不要总是这样挑剔～
这里用到的是enter键
很明显这边有个方法showDialog()
2、在<script>标签内写方法showDialog()
<script>export default {data() {return {msg: '大家好！我是第一个页面的第一个视图'}},methods:{showDialog: function () {alert("哦豁！你按了enter键")}}}</script>
3、好啦，看下效果
将焦点定位在输入框（重点，这句话要考！）
按enter键
就会弹出提示框
是不是灰常的简单～
除了刚才写的enter键，自然还有许多键，直接看官网就好啦！
vue.js官网按键码
到这里并没有结束～
要是就这么简单我还专门写一篇博客我是闲的嘛？
前面说了一个重点，需要将焦点定位在输入框，才可以用键盘的按键事件。
这个不满足我的需求～
我的用户群体是没有鼠标的，他们要求使用全键盘～其实操作熟练的情况下，用键盘比鼠标快。
所以本文的重点就是，在按下键盘的那一刻，就可以自动定位到dom节点并获取焦点，触发事件。
二、自定义键盘指令，按键获取焦点
其实这个思路就是顺着dom节点来查找和匹配。
不行🙅♂️我好困啊，都快12点了，明天或者改天再写吧～
～～～～～～～～～～～～～～～～～
我肥来更新博客啦～
～～～～～～～～～～～～～～～～～
这几天好忙呀，疫情期间远程办公比以前在公司难多了，钉钉上各种打卡、签到、填表，还有各种统计、计划、汇报、开会和总结，琐碎的事情让人觉得好疲惫哦～让我几乎没有自己学习和思考的时间。
感觉自己变成了一个莫得感情的填表机器。
回到正题
第一步，要定义一个全局指令，监听键盘事件；
第二步，为每个需要绑定键盘按键的dom加一个属性，bind_key；
第三步，监听键盘按键，查找页面上与之匹配的dom元素属性，成功匹配后，获取dom元素的id并定位焦点；
第四步，你想啊，都拿到id了还不是想干嘛就干嘛～
来写代码吧！
1、目录/src/directives/下，新建一个keyDirective.js
/***@Author:Yolanda*@Date: /3/2 11:46 PM*/Yolanda_NuoNuo*/import Vue from 'vue'Vue.directive('keyBindListen', {bind: function (el, binding) {document.onkeydown = function (e) {var ev = window.event || e;var curkey = ev.keyCode || ev.which;$('[bind_key]').each(function (e) {if (curkey === $(this).attr('bind_key')){$('#' + $(this).attr('id')).focus();$('#' + $(this).attr('id')).click();}})}}});
定义了一个指令，去循环查找页面上有bind_key属性的dom元素。
这里有一点需要注意，就是当我们在vue文件中绑定按键时，一般是写ALT+A这种，但是当我们真的按下键盘，程序中拿到的值却是键盘码，也就是数字，这样这两个值就没法匹配
if (curkey === $(this）.attr('bind_key'))
只要能想到这个问题，就有办法解决，在这边加一张映射表就可以了。
2、在/src/directives/目录下，新建一个keyMapping.js
/***@Author:Yolanda*@Date: /3/11 8:22 PM*/Yolanda_NuoNuo*/function keyMapping(keycode) {let x = '';switch (keycode) {case 27:x = "ESC";break;case 33:x = "PAGEUP";break;case 34:x = "PAGEDOWN";break;case 48:x = "0";break;case 49:x = "1";break;case 50:x = "2";break;case 51:x = "3";break;case 52:x = "4";break;case 53:x = "5";break;case 54:x = "6";break;case 55:x = "7";break;case 56:x = "8";break;case 57:x = "9";break;case 65:x = "A";break;case 66:x = "B";break;case 67:x = "C";break;case 68:x = "D";break;case 69:x = "E";break;case 70:x = "F";break;case 71:x = "G";break;case 72:x = "H";break;case 73:x = "I";break;case 74:x = "J";break;case 75:x = "K";break;case 76:x = "L";break;case 77:x = "M";break;case 78:x = "N";break;case 79:x = "O";break;case 80:x = "P";break;case 81:x = "Q";break;case 82:x = "R";break;case 83:x = "S";break;case 84:x = "T";break;case 85:x = "U";break;case 86:x = "V";break;case 87:x = "W";break;case 88:x = "X";break;case 89:x = "Y";break;case 90:x = "Z";break;case 112:x = "F1";break;case 113:x = "F2";break;case 114:x = "F3";break;case 115:x = "F4";break;case 116:x = "F5";break;case 117:x = "F6";break;case 118:x = "F7";break;case 119:x = "F8";break;case 120:x = "F9";break;case 121:x = "F10";break;case 122:x = "F11";break;case 123:x = "F12";break;}return x;}export {keyMapping }
3、那刚才的keyDirective.js就可以更新成这样啦（这边加了一个组合键）
/***@Author:Yolanda*@Date: /3/2 11:46 PM*/Yolanda_NuoNuo*/import Vue from 'vue'import {keyMapping} from "./keyMapping";Vue.directive('keyBindListen', {bind: function (el, binding) {document.onkeydown = function (e) {var ev = window.event || e;var curkey = ev.keyCode || ev.which;curkey = keyMapping(curkey)if (e.ctrlKey){curkey = "CTRL&" + curkey;} else if(e.altKey){curkey = "ALT&" + curkey;} else if (e.shiftKey){curkey = "SHIFT&" + curkey;} $('[bind_key]').each(function (e) {if (curkey === $(this).attr('bind_key')){$('#' + $(this).attr('id')).focus();$('#' + $(this).attr('id')).click();}})}}});
4、记得main.js里面引入一下
// 引入按键指令import './directives/keyDirective'import './directives/keyMapping'
再找一个vue文件测试一下就可以啦
用上前面写的键盘监听指令，v-key-bind-listen
<template><div v-key-bind-listen><div><button class="btn btn-lg btn-primary">测试bootstrap样式</button></div><div><input type="text" @keyup.13="showDialog()"></div><div><button class="btn btn-lg btn-primary" id="escBtn" bind_key="ESC" @click="showDialogEsc()">按键获取焦点Esc</button></div>{{msg}}<div><img src="../../assets/image/4.png" style="width: 300px;height: 300px"></div></div></template><style>body {/*background-color: darkslategray;*/}</style><script>export default {data() {return {msg: '大家好！我是第一个页面的第一个视图'}},methods:{showDialog: function () {alert("哦豁！你按了enter键")},showDialogEsc: function () {alert("哦豁！你按了esc键")}}}</script>
组合键就写成这样就可以啦
<button class="btn btn-lg btn-primary" id="escBtn" bind_key="ALT+A" @click="showDialogEsc()">按键获取焦点ALT+A</button>
这里需要特别注意一下，由于我是通过查找属性和获取id来操作dom的，所以
第一，要在绑定按键的标签里定义属性，bind_key，属性值里写上需要绑定的快捷键
第二，需要定义唯一的id
成功啦，载入页面的时候，按ESC键就可以定位到按钮并触发事件，弹出提示框啦～
另附代码github链接
本文github完整源码
