上回书说到怎么在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完整源码