vue 自定义指令的快捷键获取焦点介绍注意事项使用说明1、安装2、引入指令3、局部注册4、全局注册5、指令v-short

使用vue的directive来快捷获取焦点，支持回车、方向键、回车+方向键，不支持单选框和复选框

源码请查看

介绍

使用directive的钩子函数

1、inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

2、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

参数

1、指令参数binding.arg的值为keydown;例如：v-shortCut:keydown

2、修饰符binding.modifiers的值可以为enter（回车键）、arrow（方向键）、keyDown（回车键+方向键）、self（可以单独绑定需要获取焦点的id或id数组）例如：v-shortCut:keydown.enter；v-shortCut:keydown.enter.self

3、指令的绑定值binding.value的使用请查看使用说明中的接收值说明

时序问题

componentUpdated是在VNode更新之后调用，但存在dom渲染的时序问题，故使用setTimeout

注意事项

1、默认获取绑定元素下的所有input

2、若存在日期控件和下拉框控件，请选择修饰符为keyDown,因为日期控件和下拉框的方向键需要选择内容，所以日期和下拉框控件只有回车键起作用

3、默认忽略radio、checkbox和类型为disabled的，目前版本采用支持的是elementUI，radio、checkbox的框被隐藏，所以不支持这两个控件

使用说明

1、安装

npm i @logmei/vue-short-cut -D

2、引入指令

import shortCut from '@logmei/vue-short-cut'

3、局部注册

 directives: {
    shortCut
  }

4、全局注册

 Vue.use(shortCut)

5、指令v-shortCut

1.0版本

指令名：keydown

修饰符：keyDown（回车和上下左右键）、arrow（上下左右键）、enter（回车键）、self（指定元素）

接收值说明

1、self（value接收值为id的值或id的数组）

字符串： js v-shortCut:keydown.keyDown.self="'aa'"

数组：js v-shortCut:keydown.keyDown.self="['aa','bb','cc','dd']"

2、其他修饰符

Number类型：值为一行的操作元素个数，用于上下键

 v-shortCut:keydown.keyDown="10"
 v-shortCut:keydown.arrow="10"

可变值：用于重置光标位置

   v-shortCut:keydown.keyDown="s"
   v-shortCut:keydown.arrow="s"
   v-shortCut:keydown.enter="s"

Object：

shortCutObj: {
   rowCount: 11,//值为一行的操作元素个数，用于上下键
   callBack: () => {//获取最后一个元素触发的回调函数
     return this.addRow()
   },
   parenClassName: 'el-table__body-wrapper', //父元素class下的所有操作元素
   ignore:[]//需要忽略的元素  disabled、select、radio、checkbox、date、multi_select (默认忽略：'radio', 'checkbox', 'disabled')
 },