js快捷键设置
/* eslint-disable no-underscore-dangle */ import { each } from 'lodash'; /* 快捷键说明: * 快捷生效模块命名规范: * 1.路由模块-执行this.$hotKey.set('ModuleName', {'F9': ()=>{...callback() }}). ModuleName:'Pos.order' * 2.弹窗模块-执行Dialog name=ModuleName,并传入:hotkeys='callbackObj'. ModuleName:'PosDialog.settlement' * 3.说明-初始设计为键盘的'down'事件,后增加了'up'事件(本不应该使用),所有快捷键均变成了两次触发(down和up)方法会被调用两次, 目前暂不做处理. */ /* 按键字典 * 主键盘: 大写和小写字母, 数字键, 功能键 * 小键盘: 数字键,功能键 * F功能键 * Ctrl-添加'.ctrl', Shift-添加'.alt' */ const KEYCODE = { // 65: "a", 66: "b", 67: "c", 68: "d", 69: "e", 70: "f", 71: "g", // 72: "h", 73: "i", 74: "j", 75: "k", 76: "l", 77: "m", 78: "n", // 79: "o", 80: "p", 81: "q", 82: "r", 83: "s", 84: "t", 85: "u", // 86: "v", 87: "w", 88: "x", 89: "y", 90: "z", 65: 'A', 66: 'B', 67: 'C', 68: 'D', 69: 'E', 70: 'F', 71: 'G', 72: 'H', 73: 'I', 74: 'J', 75: 'K', 76: 'L', 77: 'M', 78: 'N', 79: 'O', 80: 'P', 81: 'Q', 82: 'R', 83: 'S', 84: 'T', 85: 'U', 86: 'V', 87: 'W', 88: 'X', 89: 'Y', 90: 'Z', // 主键盘数字键 48: '0', 49: '1', 50: '2', 51: '3', 52: '4', 53: '5', 54: '6', 55: '7', 56: '8', 57: '9', // 小键盘数字键 96: '0', 97: '1', 98: '2', 99: '3', 100: '4', 101: '5', 102: '6', 103: '7', 104: '8', 105: '9', // 功能键 16: 'Shift', 17: 'Ctrl', 18: 'Alt', // 主键盘其他 8: 'BackSpace', 9: 'Tab', 13: 'Enter', 27: 'Esc', 32: 'Space', 33: 'PgUp', 34: 'PgDn', 35: 'End', 36: 'Home', 45: 'Insert', 187: '+', 189: '-', 188: ',', 190: '.', 191: '/', 219: '{', 220: '|', 221: '}', // 小键盘其他 108: 'Enter', 106: '*', 107: '+', 109: '-', 110: '.', 111: '/', // F功能键 112: 'F1', 113: 'F2', 114: 'F3', 115: 'F4', 116: 'F5', 117: 'F6', 118: 'F7', 119: 'F8', 120: 'F9', 121: 'F10', 122: 'F11', 123: 'F12', 38: '↑', 40: '↓', 37: '←', 39: '→', }; /* 快捷键构建类 */ export default class HotKey { constructor() { // 快捷键 存储'执行回调'的对象 this.hotkeys = {}; // 快捷键 模块名称合集 this.modules = []; // this.currentModule = null this.uphotkeys = {}; } static isStop = false stop() { this.constructor.isStop = true; } start() { this.constructor.isStop = false; } // 初始化 init() { document.onkeydown = (event) => { // 获取事件相关属性, 阻止浏览器 BackSpace键,返回url let _vReadOnly; let _vDisabled; const _obj = event.target || event.srcElement; const _t = _obj.type || _obj.getAttribute('type'); _vReadOnly = _obj.readOnly; _vDisabled = _obj.disabled; // 处理undefined值情况 _vReadOnly = (_vReadOnly == undefined) ? false : _vReadOnly; _vDisabled = (_vDisabled == undefined) ? true : _vDisabled; // 事件源类型为密码或单行、多行文本的,并且readOnly属性为true或disabled属性为true的,则退格键失效 const _flag1 = (_t === 'password' || _t === 'text' || _t === 'textarea' || _t === 'number') && (_vReadOnly === true || _vDisabled === true); // 当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 const _flag2 = _t !== 'password' && _t !== 'text' && _t !== 'textarea' && _t !== 'number'; // 屏蔽input和textarea的Enter键默认事件, 同时屏蔽button按钮的Enter if (event.keyCode === 13 || (event.keyCode === 13 && $(event.target).is('button'))) { // 但是 恢复 饿了么的弹框组件的确认按钮,所需要的回车键功能恢复,从这加一个判断条件如果是饿么的组件就不屏蔽 if (!$(event.target).hasClass('el-button')) { event.preventDefault(); } } // 屏蔽 F1~F11案件的浏览器默认事件 // 键盘按下 Ctrl + F1~F6 时触发 // BackSpace键入非input或textarea(或状态为readOnly,disabled), 阻止url返回 if ( event.keyCode >= 112 && event.keyCode <= 122 || (event.keyCode >= 112 && event.keyCode <= 117 && event.ctrlKey) || (event.keyCode == 8 && (_flag1 || _flag2)) ) { event.preventDefault(); } // 执行事件触发 this.trigger(event); }; document.onkeyup = (event) => { this.trigger(event, 'up'); }; } // 设置模块名及回调(执行方法) set(moduleName, options, type = 'down') { const index = this.modules.indexOf(moduleName); if (index != -1) { this.modules.splice(index, 1); } this.modules.push(moduleName); if (type === 'down') { if (options) { each(options, (handler, name) => { this.hotkeys[`${moduleName}.${name}`] = handler; }); } } else if (type === 'up') { if (options) { each(options, (handler, name) => { this.uphotkeys[`${moduleName}.${name}`] = handler; }); } } } findMethod(name, callback, moduleName, type = 'down') { if (this.modules.length) { const curModule = this.modules[this.modules.length - 1]; // 最后一个设置热键的界面模块名 const method = `${curModule}.${name}`; let hotkeys = {}; if (type === 'down') { hotkeys = this.hotkeys; } else if (type === 'up') { hotkeys = this.uphotkeys; } if (hotkeys[method]) { callback(hotkeys[method]); } else if (curModule.length) { const modules = curModule.split('.'); modules.pop(); const prevMethod = `${modules.join('.')}.${name}`; if (hotkeys[prevMethod]) { callback(hotkeys[prevMethod]); } } } } // 事件触发方法 trigger(event, type = 'down') { if (this.constructor.isStop || $('.el-message-box__wrapper:visible').length) { return; } this.findMethod( KEYCODE[event.keyCode] + (event.ctrlKey ? '.ctrl' : '') + (event.altKey ? '.alt' : ''), (handler) => { handler(event); }, null, type, ); } // 移除关闭模块(基于模块名) removeCurrentModule(name) { if (this.modules[this.modules.length - 1] == name) { this.modules.pop(); } if (name.indexOf('AddPayHotkey') != -1) { this.modules.forEach((item, index, arr) => { item == name && arr.splice(index, arr.length - 1); }); } } }
import HotKey from '@/common/js/HotKey'; const VueHotKey = {}; VueHotKey.install = (Vue) => { const VueSelf = Vue; VueSelf.prototype.$hotKey = new HotKey(); }; export default VueHotKey;
import VueHotkey from './vue-hotkey'; Vue.use(VueHotkey);