@shmao/keyboardlistener v1.1.4

keyboardListener

用于监听页面键盘事件

下载

npm i keyboard-listener -S
# or
yarn add keyboard-listener

语法

# 全局注册表中的监听事件
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: 全局注册

// main.js
import KeyboardListener from 'keyboard-listener';
Vue.prototype.$key = new KeyboardListener({
  type: 'keydown', // 非必填
  logger: false, // todo
  register: {
    'Alt+S': ['handleTreatSubmit']
  }
})

// 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(){}
}

/**
 * 函数防抖装饰器
 * @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: 单独注册

// vue单文件
created() {
    this.$key.add('Alt+S', 'handleTreatSubmit', () => {...});
},
beforeDestroy(){
	this.$key.remove('handleTreatSubmit', 'Alt+S');
}

元素中注册

在 <inputs>, <textarea> 以及任何具有 contentEditable 或 tabindex="-1"属性的组件中注册键盘事件

设置style="outline:none"清除默认黑边

开发中需要在非输入框元素上添加tabindex='-1'的属性

如果添加了el-button或者原生click事件开启弹框, 需要清除click选中状态

mounted() {
    // 方式1
    this.key.register('input', () => {
          console.log(this.msg);
    }, '#input');

    // 方式2
    this.key.add('Enter', 'input', () => {
          console.log(this.msg);
    }, '#input');
},
beforeDestroy() {
  this.key.remove(['input']);
}

el-button失焦快捷指令

import Vue from "vue";

Vue.directive("blur", {
  bind(el, binding) {
    // @ts-ignore
    el.handler = (e: EventEmitter) => {
      el.blur();
      e.target.blur();
      binding.value(e);
    };
    // @ts-ignore
    el.addEventListener("click", el.handler);
  },
  unbind(el) {
    // @ts-ignore
    el.removeEventListener("click", el.handler);
  },
});

事件名规范

• 单键
  • 比如'Ctrl', 'A', F5
• 组合键
  • 比如'Ctrl+S', 'Ctrl+A', 'Alt+S', 'Shift+S'
• 三个组合键, 按照顺序Ctrl,Shift,Alt
  • 比如'Ctrl+Shift+A','Ctrl+Alt+S'

键盘码

mac相关键映射: TODO