VUE3.0 使用全局快捷键

本文介绍了在Vue3.0中如何轻松实现全局快捷键功能。通过监听document的onkeypress或onkeydown事件,创建一个全局快捷键类,并在程序入口引入。在需要的地方按照指定方式调用,即可实现快捷键监听。
摘要由CSDN通过智能技术生成

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)){
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值