vue使用demo（vue兼容Mac和Win按键功能）

作者：小布

转发链接：https://mp.weixin.qq.com/s/NcosSIx6Nuyx5W-HHwtA-w

想必大家在工作中会遇到类似的问题，领导需要我们给某些特定的按钮加上快捷键的功能。

比如，Ctrl S/Command S保存表单内容、Ctrl P/Command P打印文件、Ctrl E/Command E编辑等等。

前段时间小编也发布过一篇Vue项目给应用优雅的绑定快捷键，有兴趣的小伙们可以看看。

大家或许会想到使用KeyCode键码，来进行判断，是的这是一种可行的方案。

但是需要同时兼容mac和win的话，就需要我们进行更多的优化。

今天给大家介绍一个成熟的库：https://github.com/fabiospampinato/shortcuts

npminstall--saveshortcuts

这个库提供了一个Shortcuts类，它将管理你的快捷键，和快捷键相关对象，并且还提供了一下实用的程序。

供我们使用的按键分别有以下分类：

• 工具键 Alt/Option, Cmd/Command/Meta, Ctrl/Control, Shift, CmdOrCtrl/CommandOrControl
• 数字键 1-9
• 字母表键 A-Z
• 功能键 F1-F24
• Numpad 数字键 Numpad0-Numpad9
• 特殊键Backspace, Capslock, del/Delete, Down, End, Enter/Return, Esc/Escape, Home, Insert, Left, PageDown, PageUp, Right, Space/Spacebar, Tab, Up.
• 符号键 !, ", #, $, %, &, ', (, ), *, /plus, ,, -,., /, :, ;, <, =, >, ?, @, [, \, ], ^, _ ,{, |, },~, `

• 快捷键不区分大小写
• 使用组合键的时候必须要加一个加号（eg：Ctrl A）
• 组合键序列必须加一个空格（eg：Ctrl K Ctrl B）

此工具类中分别有以下方法add/remove/reset/record.

classShortcuts{ constructor(options?:{shortcuts?:ShortcutDescriptor[]:capture?:boolean,target?:Node,shouldHandleEvent?:event=>boolean}); get():ShortcutDescriptor[]; add(descriptors:ShortcutDescriptor|ShortcutDescriptor[]); remove(descriptors:ShortcutDescriptor|ShortcutDescriptor[]); reset(); record(handler:(shortcut)=>any):Function; }

import{Shortcuts}from'shortcuts'; constshortcuts=newShortcuts(); functionCtrlBHandler(){}; shortcuts.add([//Addingsomeshortcuts {shortcut:'Ctrl A',handler:event=>{ console.log(event); returntrue;//Returningtruebecausewedon'twantotherhandlersforthesameshortcuttobecalledlater }}, {shortcut:'Ctrl B',handler:CtrlBHandler}, {shortcut:'CmdOrCtrl KShift B',handler:()=>{ //Doingsomething... returntrue;//Returningtruebecausewedon'twantotherhandlersforthesameshortcuttobecalledlater }}, {shortcut:'-Ctrl A'}//Removingthepreviousshortcut ]); shortcuts.remove({shortcut:'Ctrl-B',handler:CtrlBHandler});//Removingasinglehandler shortcuts.remove({shortcut:'Ctrl-A'});//Removingallhandlersboundtothisshortcut shortcuts.reset();//Removingallshortcuts constdispose=shortcuts.record(shortcut=>{//Recordingshortcuts console.log('Shortcutrecorded:',shortcut); }); dispose();//Stoppingrecording

它还提供了其他的应用程序：

constShortcut={ shortcut2id(shortcut:string):number[]; shortcut2accelerator(shortcut:string):string; shortcut2symbols(shortcut:string):string; };

import{Shortcut}from'shortcuts'; Shortcut.shortcut2accelerator('Meta Del');//=>'Cmd Delete' Shortcut.shortcut2symbols('Cmd Shift A');//=>'⌘⇧A'

如上图所示，主页面和弹窗内分别都有添加按钮。

我们可以通过判断弹窗是否弹出来区分相同的按钮来执行不同的功能。

1. main.js中引用shortcuts，将其作为全局的方法

importVuefrom'vue' importAppfrom'./App.vue' import{Shortcuts}from'shortcuts'; Vue.prototype.$shortcuts=newShortcuts(); Vue.config.productionTip=false newVue({ render:h=>h(App), }).$mount('#app')

2. helloWorld.vue

<template> <divclass="key-test"> <h1>{{msg}}</h1> <divclass="btn-test1"> <h3>按钮组合列表</h3> <div> <div> <button@click="add">添加</button> <span>CmdOrCtrl A</span> </div> <div> <button@click="del">删除</button> <span>CmdOrCtrl D</span> </div> <div> <button@click="print">打印</button> <span>CmdOrCtrl P</span> </div> <div> <button@click="functionKey">F1</button> <span>F1</span> </div> </div> <pclass="result">{{keyMsg}}</p> </div> <divclass="popup-test2"> <h3>弹窗内使用按键</h3> <button@click="openPop">打开弹窗</button> <divid="vModal"v-if="isShow"> <divclass="bg"></div> <divclass="dialog"> <pclass="close"@click="isShow=false">X</p> <p>弹窗内按钮如何在关闭弹窗的时候禁用？！</p> <button@click="addPopbtn">弹窗内添加</button> <button@click="dialogMsg=''">清空</button> <pclass="result">{{dialogMsg}}</p> </div> </div> </div> </div> </template> <script> exportdefault{ name:'HelloWorld', props:{ msg:String }, data(){ return{ keyMsg:'', dialogMsg:'', isShow:false } }, created(){ this.keycodeEvent() }, methods:{ add(){ this.keyMsg='添加' console.log('添加') }, addPopbtn(){ this.dialogMsg='弹窗内添加按钮' }, openPop(){ this.dialogMsg='' this.isShow=true }, del(){ this.keyMsg='删除' console.log('删除') }, print(){ this.keyMsg='打印' console.log('打印') }, functionKey(){ this.keyMsg='F1' console.log('F1') }, //添加热键 keycodeEvent(){ this.$shortcuts.add([//Addingsomeshortcuts { shortcut:'cmdorctrl A',//支持大小写 handler:event=>{ console.log(event); if(document.querySelector('#vModal')){//如果弹窗出现，按键触发弹窗内的方法 this.addPopbtn() }else{ this.add() } returntrue; } },{ shortcut:'CmdOrCtrl D', handler:event=>{ console.log(event); this.del() returntrue; } },{ shortcut:'CmdOrCtrl P', handler:event=>{ //打印 console.log(event); this.print() returntrue; } }, { shortcut:'F1', handler:event=>{ console.log(event); this.functionKey() returntrue; } }, ]); } } } </script>

https://github.com/yzren/key-shortcut/

作者：小布

转发链接：https://mp.weixin.qq.com/s/NcosSIx6Nuyx5W-HHwtA-w