README

keying 按键监听解决方案

适合vue中，监听各个页面，弹窗，输入框，快捷键监听，回调。
git:https://gitee.com/lkangyi/keying npm:https://www.npmjs.com/package/keying

keying 注入

main.js注入

import keying from 'keying';
Vue.use(keying);

bind 绑定

this.keying.bind(priority:Number, event:Object, id:String);

priority：
优先级序号，同一层嵌套中不允许出现相同值。
如果上层需要访问底层的按键，底层的priorit绑定为数组 [curNumber, maxNumber]。 maxNumber为上层的序号。
event：按键监听的集合，name列表可查看源文件，如果按键未收录，会打印warn（默认不打印）。
id:
不传，监听页面快捷键（不含输入框）；
传输入框id，监听聚焦的输入框里按键（不监听页面）；
如需同时监听请看同时监听页面与输入框

序号建议：框架0、页面10、弹窗20；每一大的级别间隔10预留一些小的监听
输入框：input、textarea、select

this.keying.bind(10, {
  a: (event, elist) => {
    // event: 事件对象
    // elist: 事件列表
    console.log('a-2222');
  },
  f2: () => {
    console.log('f2-2222');
  },
});

// 可省略bind
this.keying([20,30], { // [20,30]表示，当最大序号为20~30之间，执行
  a: () => {
    console.log('a-333');
  }
});
this.keying(20, { 
  a: () => {
    console.log('a-2222');
  }
});
// 卸载
this.keying.unbind(10); 
this.keying.unbind(20); 
this.keying.unbind([20,30]);

同时监听页面与输入框

方案一

使用插件的ID绑定监听，并使用当前页面按键优先级，插件会绑定一个集合。集合用id区分获取

<input id="aaa" />
<Input id="bbb"></Input>

<script>
// 页面绑定
this.keying.bind(20, {
  a: () => {
    console.log('a-1111');
  }
});
// 标签input#aaa绑定
this.keying.bind(20, {
  a: () => {
    console.log('a-input');
  }
},'aaa');
// 组件Input#bbb绑定
this.keying.bind(20, {
  b: () => {
    console.log('b-input');
  }
},'bbb');
// 卸载
this.keying.unbind(20);
</script>

插件会匹配当前输入标签的id以及向外一层标签（iview框架id挂在外一层）的id进行匹配。 其他框架id挂在哪一层，待考察。

方案二

使用input的focus绑定一个优先级更高的按键，失焦移除。

<input @on-focus="inputBind" @on-blur="inputUnbind" />
<script>
inputBind(){
  this.keying.bind(21, {
    a: () => {
      console.log('a-333');
    },
    enter: () => {
      console.log('enter-333');
    },
  });
}
inputBind(){
  this.keying.unbind(21);
}
</script>

unbind 卸载

this.keying.unbind(priority:Number);

priority：绑定设置的优先级序号。只支持单个卸载，卸载多个调用多次即可。

this.keying.unbind(20);

Usage no npm install needed!