vue 自定義指令的快捷鍵獲取焦點

使用vue的directive來快捷獲取焦點，支持回車、方向鍵、回車+方向鍵，不支持單選框和複選框

源碼請查看

介紹

使用directive的鉤子函數

• 一、inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
• 二、componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。

參數

• 一、指令參數binding.arg的值爲keydown;例如：v-shortCut:keydown
• 二、修飾符binding.modifiers的值能夠爲enter（回車鍵）、arrow（方向鍵）、keyDown（回車鍵+方向鍵）、self（能夠單獨綁定須要獲取焦點的id或id數組）例如：v-shortCut:keydown.enter；v-shortCut:keydown.enter.self
• 三、指令的綁定值binding.value的使用請查看使用說明中的接收值說明

時序問題

componentUpdated是在VNode更新以後調用，但存在dom渲染的時序問題，故使用setTimeout

注意事項

• 一、默認獲取綁定元素下的全部input
• 二、若存在日期控件和下拉框控件，請選擇修飾符爲keyDown,由於日期控件和下拉框的方向鍵須要選擇內容，因此日期和下拉框控件只有回車鍵起做用
• 三、默認忽略radio、checkbox和類型爲disabled的，目前版本採用支持的是elementUI，radio、checkbox的框被隱藏，因此不支持這兩個控件

使用說明

• 一、安裝

npm i @logmei/vue-short-cut -D 
複製代碼

• 二、引入指令

import shortCut from '@logmei/vue-short-cut'
複製代碼

• 三、局部註冊

directives: {
    shortCut
  }
複製代碼

• 四、全局註冊

Vue.use(shortCut)
複製代碼

• 五、指令v-shortCut

1.0版本

• 指令名：keydown
• 修飾符：keyDown（回車和上下左右鍵）、arrow（上下左右鍵）、enter（回車鍵）、self（指定元素）

接收值說明

一、self（value接收值爲id的值或id的數組）

• 字符串： js v-shortCut:keydown.keyDown.self="'aa'"
• 數組：js v-shortCut:keydown.keyDown.self="['aa','bb','cc','dd']"

二、其餘修飾符

• 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')
 },
複製代碼