vue.js 应用程序的辅助功能 - 单击 Tab 键时显示 div

Question

I will create a menu with jump marks for accessibility that is only visible when the tab key on the keyboard is clicked. How can I implement this in Vuetify? is there a way to use something like @click for this? This is my html code for the menu:

 <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>

Answer 1

In order to capture the tab on the entire page, you may need to look at putting the following on the app element:

v-on:keydown.tab='handleTab'

Now you can open a menu or do other actions in the handler.

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>

Here is a sample :