VUE3.0 使用全局快捷键

Posted 2022-07-28 bywayboy

vue3.0中 使用全局快捷键是比较容易的, 我们可以通过监听document.onkeypress 或者 onkeydown 来实现.

1. 首先编写一个全局快捷键类, 

import  inject  from "@vue/runtime-core";

const rkey = \'r-shortcut-key\'

function RKeyMap()
    var map = ;
    this.bind = (skey, fn)=>
        map[skey] = fn;
        return this;
    
    this.evt = (k) =>
        if(map.hasOwnProperty(k))
            map[k]();return true;
        
        return false;
    



let ShortCutKey = function()

    let keys = [], me = this;

    document.onkeydown = function(e)
        if(keys.length > 0)
            let ka = [];
            if(e.ctrlKey) ka.push(\'Ctrl\');
            if(e.shiftKey)ka.push(\'Shift\');
            if(e.altKey) ka.push(\'Alt\');
            ka.push(e.key.toUpperCase());
            let kname = ka.join(\'+\');
            if(keys[keys.length-1].evt(kname))