for_client/src/test/index.vue

<template>
    <div class="hc-page-box">
        <HcCard title="测试">
            <el-button type="primary" @click="hideClick">设置焦点</el-button>

            <el-input type="text"
                      id="a1"
                      v-model="value1"
                      @keyup.shift.up="keyupShiftUp"
                      @keyup.shift.down="keyupShiftDown"
                      />

            <el-date-picker
                v-model="value2"
                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="value3"
                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="value4"
                placeholder="Select"
                @keyup.shift.up="keyupShiftUp"
                @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 {nextTick, onMounted, ref} from "vue";
//import { getRandom } from "vue-utils-plus"

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = 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 = ({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 = ({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>