# [keyboardListener](http://192.168.57.7:4873/-/web/detail/keyboard-listener) > 用于监听页面键盘事件 ## 下载 ```cmd npm i keyboard-listener -S # or yarn add keyboard-listener ``` ## 语法 ```typescript # 全局注册表中的监听事件 register( eventName: string, callback: () => any, element?: HTMLElement, isAutoFocusEl?: boolean ):KeyboardListener # 单独监听, 如果全局注册表中有改事件, 则覆盖 add(compositionKeys: string, eventName: string, callback: () => any, element?: HTMLElement, isAutoFocusEl?: boolean):KeyboardListener # 销毁事件 remove(eventName: string|string[], compositionKeys?: string):KeyboardListener ``` ## 参数 `eventname` - 事件名称, 全局注册表下的不可重复. `callback` - 事件回调 `compositionKeys` - 组合键名称, 使用了改参数就不能再全局注册该事件名 `element` - 元素注册 - 元素需要设置属性`tabindex = -1` `isAutoFocusEl` - 是否聚焦该元素, 默认聚焦 ## 在Vue中使用 **方式1: 全局注册** ```js // main.js import KeyboardListener from 'keyboard-listener'; Vue.prototype.$key = new KeyboardListener({ type: 'keydown', // 非必填 logger: false, // todo register: { 'Alt+S': ['handleTreatSubmit'] } }) ``` ```js // vue单文件 created() { this.$key.register('handleTreatSubmit', () => { console.log('处置治疗保存', new Date()); this.handleSubmit(); }) }, beforeDestroy() { console.log('>>>treat beforeDestroy>>>'); // 销毁 this.$key.remove('handleTreatSubmit'); }, methods: { # 最好加上防抖 @_debounce(300, {leading:true,trailing:false}) handleSubmit(){} } ``` ```js /** * 函数防抖装饰器 * @param {number} wait 需要延迟的毫秒数。 * @param {Object} options 选项对象 * [options.leading=false] (boolean): 指定在延迟开始前调用。 * [options.maxWait] (number): 设置 func 允许被延迟的最大值。 * [options.trailing=true] (boolean): 指定在延迟结束后调用。 */ export const _debounce = function(wait, options = {}) { return function(target, name, descriptor) { descriptor.value = debounce(descriptor.value, wait, options); }; }; ``` **方式2: 单独注册** ```js // vue单文件 created() { this.$key.add('Alt+S', 'handleTreatSubmit', () => {...}); }, beforeDestroy(){ this.$key.remove('handleTreatSubmit', 'Alt+S'); } ``` ## 元素中注册 > 在 ``, `