vue兼容Mac和Win按键功能 —— 实战型

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

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

---

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 handler
shortcuts.remove ({ shortcut: 'Ctrl-A' }); // Removing all handlers bound to this shortcut

shortcuts.reset (); // Removing all shortcuts

const 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 = false

new Vue({
  render: h => h(App),
}).$mount('#app')

1. helloWorld.vue

<template>
  <div class="key-test">
    <h1>{{ msg }}</h1>
    <div class="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>
      <p class="result">{{keyMsg}}</p>
    </div>
    <div class="popup-test2">
      <h3>弹窗内使用按键</h3>
      <button @click="openPop">打开弹窗</button>
      <div id="vModal" v-if="isShow">
        <div class="bg"></div>
        <div class="dialog">
          <p class="close" @click="isShow = false">X</p>
          <p>弹窗内按钮如何在关闭弹窗的时候禁用？！</p>        
          <button @click="addPopbtn">弹窗内添加</button>
          <button @click="dialogMsg=''">清空</button>
          <p class="result">{{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>

demo完整地址

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

 

在看支持小布一下❤️