shortcuts

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

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

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

安装

npm install --save shortcuts

用法

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

Shortcut 语法

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

• 工具键 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）

Shortcut 类

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

class Shortcuts {  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';const shortcuts = new Shortcuts ();function CtrlBHandler () {};shortcuts.add ([ // Adding some shortcuts  { shortcut: 'Ctrl+A', handler: event => {    console.log ( event );    return true; // Returning true because we don't want other handlers for the same shortcut to be called later  }},  { shortcut: 'Ctrl+B', handler: CtrlBHandler },  { shortcut: 'CmdOrCtrl+K Shift+B', handler: () => {    // Doing something...    return true; // Returning true because we don't want other handlers for the same shortcut to be called later  }},  { shortcut: '-Ctrl+A' } // Removing the previous shortcut]);shortcuts.remove ({ shortcut: 'Ctrl-B', handler: CtrlBHandler }); // Removing a single handlershortcuts.remove ({ shortcut: 'Ctrl-A' }); // Removing all handlers bound to this shortcutshortcuts.reset (); // Removing all shortcutsconst dispose = shortcuts.record ( shortcut => { // Recording shortcuts  console.log ( 'Shortcut recorded:', shortcut );});dispose (); // Stopping recording

Shortcut 对象

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

const Shortcut = {  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，将其作为全局的方法

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

2. helloWorld.vue

<template>  <div >    <h1>{{ msg }}</h1>    <div >      <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>      <p >{{keyMsg}}</p>    </div>    <div >      <h3>弹窗内使用按键</h3>      <button @click="openPop">打开弹窗</button>      <div id="vModal" v-if="isShow">        <div ></div>        <div >          <p  @click="isShow = false">X</p>          <p>弹窗内按钮如何在关闭弹窗的时候禁用？！</p>                  <button @click="addPopbtn">弹窗内添加</button>          <button @click="dialogMsg=''">清空</button>          <p >{{dialogMsg}}</p>        </div>      </div>    </div>      </div></template><script>export default {  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([ // Adding some shortcuts             {                shortcut: 'cmdorctrl+A',//支持大小写                handler: event => {                  console.log ( event );                 if(document.querySelector('#vModal')){//如果弹窗出现，按键触发弹窗内的方法                    this.addPopbtn()                 }else{                    this.add()                 }                  return true;                }            },  {                shortcut: 'CmdOrCtrl+D',                handler: event => {                  console.log ( event );                  this.del()                  return true;                }            }, {                shortcut: 'CmdOrCtrl+P',                handler: event => {                  // 打印                  console.log ( event );                  this.print()                  return true;                }            },            {                shortcut: 'F1',                handler: event => {                  console.log ( event );                  this.functionKey()                  return true;                }            },        ]);    }  }}</script>