作者：小布

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

前言

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

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

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

---

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

demo完整地址

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

作者：小布

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