Блог

Я создал список в своей программе. В этом списке вы нажимаете стрелку вверх или стрелку вниз, чтобы перемещаться между элементами, созданными с помощью v-для в указанном списке. Когда вы используете стрелки для навигации по списку, счетчик используется для определения того, какой элемент в этом списке является «выбранным». Моя текущая проблема заключается в следующем: когда вы «выбираете» элемент, который находится вне вашего поля зрения, окно браузера не следует за ним вниз, позволяя выбору продолжать «опускаться» по этому списку, но пользователь не может видеть другие выбранные элементы.

Я пробовал возиться с функцией focus (), но я не знаю, как сфокусировать() конкретный элемент без использования атрибута ссылки, который я также, похоже, не могу реализовать, поскольку он создается с помощью v-for. Вот моя текущая таблица:

 <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 amp;amp; this.navegacaoSetasAtiva == true) {
            if (key == 'ArrowDown' amp;amp; 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' amp;amp; this.navegacaoAtual <= this.pedidos.length amp;amp; this.navegacaoAtual > 0) {
                this.navegacaoAtual--
            } else if (key == 'Enter') {
                let pedidoSelecionado = this.pedidos[this.navegacaoAtual].id
                Event.$emit('changeShow', pedidoSelecionado)
            }
        }
    },
 

Мы ценим любую помощь. Спасибо!

Сделав перерыв и возобновив поиск, я наткнулся на то, что делало именно то, что я хотел: функцию scrollIntoView ().

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