表单 上下左右快捷键处理

src/plugins/HTableForm.js

@@ -12,7 +12,7 @@ import {
 } from 'element-plus'
 
 const components = {
-    ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload,
+    ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
     ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
     ElRadio, ElCheckbox, ElCheckboxGroup, HcTableFormUpload, HcFormSelectSearch,
     HcFormCheckboxGroup
@@ -127,10 +127,44 @@ export default class HTableForm {
         }
         return data
     }
+
+    //处理日期时间框的切换事件
+    static setByClassKeyup(keys) {
+        const _this = this;
+        let poppers = document.getElementsByClassName('hc-table-form-date-picker')
+        for (let i = 0; i < poppers.length; i++) {
+            let key = '';
+            const classList = poppers[i].getAttribute('class')
+            const ids = classList.split('-form-id-')
+            if (ids.length >= 1) {
+                key = ids[1]
+            }
+            if (ids) {
+                let panels = poppers[i].getElementsByClassName('el-picker-panel__content')
+                for (let x = 0; x < panels.length; x++) {
+                    panels[x].addEventListener("keydown", e => {
+                        e.stopPropagation()
+                        if (e.key === 'ArrowUp') {
+                            _this.setKeyupData({target: {id: key}}, 'up', keys)
+                        } else if (e.key === 'ArrowDown') {
+                            _this.setKeyupData({target: {id: key}}, 'down', keys)
+                        } else if (e.key === 'ArrowLeft') {
+                            _this.setKeyupData({target: {id: key}}, 'left', keys)
+                        } else if (e.key === 'ArrowRight') {
+                            _this.setKeyupData({target: {id: key}}, 'right', keys)
+                        }
+                    }, {
+                        capture: true
+                    });
+                }
+            }
+        }
+    }
+
     //计算上下左右快捷键的
-    static setKeyupData({target}, type, keys) {
+    static setKeyupData({target}, type, data) {
         const key = target.id
-        /*const keys = [
+        const keys = [
             ['key_15__3_1', 'key_16__3_3'],
             ['key_10__4_1', 'key_11__4_3'],
             ['key_13__5_1'],
@@ -147,7 +181,7 @@ export default class HTableForm {
             ['key_4__19_1', 'key_12__19_2'],
             ['key_21__21_0'],
             ['key_17__22_1', 'key_17__22_2'],
-        ]*/
+        ]
         //处理快捷键数据和事件
         if (key && type && isArray(keys)) {
             //计算当前的位置

src/test/index.vue

@@ -2,37 +2,110 @@
     <div class="hc-page-box">
         <HcCard title="测试">
             <el-button type="primary" @click="hideClick">设置焦点</el-button>
+
             <el-input type="text" id="a1"
                       @keyup.shift.up="keyupShiftUp"
                       @keyup.shift.down="keyupShiftDown"/>
-            <!--el-date-picker
+
+            <el-date-picker
                 v-model="value1"
                 type="date" id="a2"
+                popper-class="hc-table-form-date-picker hc-form-id-a2"
+                @keydown.shift.up="keyupShiftUp"
+                @keydown.shift.down="keyupShiftDown"
+                placeholder="Pick a day"/>
+
+            <el-date-picker
+                id="a3"
+                v-model="value1"
+                type="date"
+                popper-class="hc-table-form-date-picker hc-form-id-a3"
+                @keydown.shift.up="keyupShiftUp"
+                @keydown.shift.down="keyupShiftDown"
+                placeholder="Pick a day"/>
+
+            <el-select
+                id="a4"
+                v-model="value2"
+                placeholder="Select"
                 @keyup.shift.up="keyupShiftUp"
-                @keyup.shift.down="keyupShiftDown"
-                placeholder="Pick a day"/-->
+                @keyup.shift.down="keyupShiftDown">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
 
         </HcCard>
     </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {nextTick, onMounted, ref} from "vue";
 //import { getRandom } from "vue-utils-plus"
 
 const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+
+const options = [
+    {value: 'Option1', label: 'Option1',},
+    {value: 'Option2', label: 'Option2',},
+    {value: 'Option3', label: 'Option3',},
+]
 
 const hideClick = () => {
     document.getElementById('xxxxx').focus();
 }
 
+onMounted(() => {
+    let poppers = document.getElementsByClassName('hc-table-form-date-picker')
+    for (let i = 0; i < poppers.length; i++) {
+        const classList = poppers[i].getAttribute('class')
+        const key = classList.split('-form-id-')[1]
+
+        let panels = poppers[i].getElementsByClassName('el-picker-panel__content')
+        for (let x = 0; x < panels.length; x++) {
+            panels[x].addEventListener("keydown", e => {
+                e.stopPropagation()
+                console.log(e.key)
+                if (e.key === 'ArrowUp') {
+                    keyupShiftUp({target: {id: key}})
+                } else if (e.key === 'ArrowDown') {
+                    keyupShiftDown({target: {id: key}})
+                } else if (e.key === 'ArrowLeft') {
+                    //keyupShiftLeft(e)
+                } else if (e.key === 'ArrowRight') {
+                    //keyupShiftRight(e)
+                }
+            }, {
+                capture: true
+            });
+        }
+    }
+})
+
+const keys = ['a1', 'a2', 'a3', 'a4']
+
 //上
-const keyupShiftUp = (event) => {
-  console.log(event)
+const keyupShiftUp = ({target}) => {
+    const key = target.id
+    const index = keys.findIndex(id => id === key)
+    if (index > 0) {
+        let keyId = keys[index - 1]
+        if (keyId) {
+            document.getElementById(keyId).focus();
+        }
+    }
 }
 
 //下
-const keyupShiftDown = (event) => {
-    console.log(event)
+const keyupShiftDown = ({target}) => {
+    const key = target.id
+    const index = keys.findIndex(id => id === key)
+    const keyLength = keys.length -1
+    if (keyLength > index) {
+        let keyId = keys[index + 1]
+        if (keyId) {
+            document.getElementById(keyId).focus();
+        }
+    }
 }
 </script>