带有键盘导航的 Vue 2 移动窗口答案

【问题标题】：Vue 2 Moving Window with Keyboard Navigation带有键盘导航的 Vue 2 移动窗口
【发布时间】：2021-10-20 22:37:08
【问题描述】：

我在我的程序中创建了一个列表。在此列表中，您按 ArrowUp 或 ArrowDown 在所述列表中使用 v-for 生成的项目之间导航。当您使用箭头浏览列表时，会使用一个计数器来了解该列表中的哪个项目是“选定”项目。我当前的问题是：当您“选择”视图之外的项目时，浏览器的窗口不会跟随它，允许选择继续“向下”这个列表，但用户无法看到其他选定的项目。

我尝试过使用 focus() 函数，但我不知道如何在不使用 ref 属性的情况下聚焦（）特定项目，我似乎也无法实现，因为它是用生成的v-为。这是我当前的表格：

<table class="table table-striped p-0 m-0" v-show="pedidos.length > 0">
            <thead class="table-dark">
                <tr class="">
                    <th>Cliente Emissor</th>
                    <th>Produto</th>
                    <!-- <th>Endereço</th> -->
                    <!-- <th>Valor</th> -->
                    <th>Data Emissão</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(pedido, index) in pedidos">
                    <itemPedido  :pedido="pedido" :key="index" :endereco="endereco" :class="[(navegacaoAtual == index) ? 'teste' : '']" ref="teste"></itemPedido>
                    <itemEdit @atualizarListaPedidos="atualizarListaPedidos" @atualizarStatusModal="atualizarStatusModal" class="animation-dropdown" :pedido="pedido" :key="pedido.nome"></itemEdit>
                </template>
            </tbody>
        </table>

这是我当前创建的 navigateWithArrows() 函数：

navegarSetas(key) {
        if (this.navegacaoSetasAtiva == false) {
            this.navegacaoSetasAtiva = true
            this.navegacaoAtual = 0
        } else if (this.modalAtivado == false && this.navegacaoSetasAtiva == true) {
            if (key == 'ArrowDown' && this.navegacaoAtual < this.pedidos.length - 1) {
                this.navegacaoAtual++
                Vue.nextTick().then(() => {
                    let teste1 = this.$refs.teste[this.navegacaoAtual]
                    teste1.$el.focus()
                })
            } else if (key == 'ArrowUp' && this.navegacaoAtual <= this.pedidos.length && this.navegacaoAtual > 0) {
                this.navegacaoAtual--
            } else if (key == 'Enter') {
                let pedidoSelecionado = this.pedidos[this.navegacaoAtual].id
                Event.$emit('changeShow', pedidoSelecionado)
            }
        }
    },

感谢所有帮助。谢谢！

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

在休息并恢复搜索后，我偶然发现了一个完全符合我要求的东西：scrollIntoView() 函数。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

【讨论】：