vue.js应用程序的可访问性 - 点击Tab键时显示div。

Question

我将创建一个带有跳转标记的菜单，只有当键盘上的Tab键被点击时才会显示。

<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

为了捕获整个页面上的标签，你可能需要看看把以下内容放在app元素上。

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>

下面是一个 样品: