Специальные возможности в приложении vue. js - показывать div при нажатии клавиши Tab - PullRequest
Новая
       10

Специальные возможности в приложении vue. js - показывать div при нажатии клавиши Tab

0 голосов
/ 05 мая 2020

Я создам меню с метками перехода для доступности, которое будет видно только при нажатии клавиши табуляции на клавиатуре. Как я могу реализовать это в Vuetify? есть ли способ использовать для этого что-то вроде @click? Это мой html код для меню: 

<template>
  <div class="m-block-tab-jump-sections" data-module="tab-jump-sections" v-on:click.tab="onClick">
    <div class="jump-sections js-sections h-break-in">
      <a href="#tab-jump-section--metamenu" class="jump-link" title="" target="" tabindex="50">
        zur Top-Navigation
      </a>
    </div>
  </div>
</template>

1 Ответ

0 голосов
/ 06 мая 2020

Чтобы захватить вкладку на всей странице, вам может потребоваться поместить в элемент приложения следующее:

v-on:keydown.tab='handleTab'

Теперь вы можете открыть меню или выполнять другие действия в обработчике. 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    showMenu: false,
    clickcount: 0,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
  methods: {
    handleTab(event) {

        this.showMenu = true;
    }
  }
})

<div id="app"  v-on:keydown.tab='handleTab'>
  <v-app id="inspire">
    <div class="text-center">
      <v-menu offset-y v-model='showMenu'>
        <template v-slot:activator="{ on }">
          <v-btn
            color="primary"
            dark
            v-on:focus='handleTab'
          >
            Dropdown
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            @click=""
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>

    <v-text-field></v-text-field>
     <v-text-field></v-text-field>
     <v-text-field></v-text-field>
     <v-text-field></v-text-field>
  </v-app>
</div>

Вот пример :

...