编 写:袁 亮 时 间:2017-08-17 说 明:复杂页面交互,键盘快捷键监听组件 一、功能描述 1、事件监听 默认绑定keydown事件 绑定单例,防止多次绑定,导致多次触发 ps:vue如果代码自动刷新,会导致又绑定一次 2、触发条件 配置条件 inInput:光标在输入框内是否触发 true:触发,false:不触发,默认true needCtrl:是否需要同时按下ctrl键 不传,不限制 true:必须按下Ctrl false:不能按下Ctrl needShift:是否需要同时按下shift键 同needCtrl needAlt:是否需要同时按下alt键 同needCtrl 自定义方法 触发的时候,会执行该方法判断是否要执行,返回true或者false 不传,默认true 3、事件触发执行 同一事件,多次绑定 后绑定的优先级更高 事件冒泡 如果事件没有被响应,自动按绑定顺序冒泡 事件互斥 同一事件,只会触发一次,捕获后,不再冒泡 默认行为阻止 事件被捕获,默认行为将被阻止 4、事件定义 内置常见事件 esc:取消 backspace enter delete up down increase decrease number:数字 float:浮点数 letter:字母 支持自定义事件配置 优先级高于内置事件 二、使用方法 1、安装包 npm install @duomai/keylisten --save ps:先切换到多麦的源 2、代码 import KeyListen from '@duomai/keyListen' // 在created钩子里,使用内置事件,不需要setConfig KeyListen.setConfig(config.shortcutKey).add({ up: function () { // todo up }, down: function () { // todo down } })