时间戳

首页 > 解决方案 > vue.js 应用程序的可访问性 - 单击 Tab 键时显示 div

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

问题描述

我将创建一个带有可访问性跳转标记的菜单，该菜单仅在单击键盘上的 Tab 键时可见。如何在 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>

标签： javascripthtmlvue.jstabsvuetify.js

解决方案

为了捕获整个页面上的选项卡，您可能需要查看将以下内容放在 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>

这是一个示例：

推荐阅读