@4rk/vue-roving-tabindex 中文文档教程
@4rk/vue-roving-tabindex
将流动标签索引添加到 Vue 组件。 这对于根据 WAI-ARIA 在组件内实现键盘导航很有用。
Installation
import VueRovingTabindex from "@4rk/vue-roving-tabindex";
Vue.use(VueRovingTabindex);
Usage
<template>
<ul v-roving-tabindex-container>
<li><button type="button" v-roving-tabindex>foo</button></li>
<li><button type="button" v-roving-tabindex>bar</button></li>
<li><button type="button" v-roving-tabindex>baz</button></li>
</ul>
</template>
Directive API
该包提供了两个 Vue 指令：
v-roving-tabindex-container
该指令表示移动 tabindex 序列的边界。 将它添加到 v-roving-tabindex 元素的父元素。
它有一个布尔修饰符，用于将方向从垂直更改为水平：
<div v-roving-tabindex-container.horizontal />
v-roving-tabindex
该指令应该用于 v-roving-tabindex-container 中的每个可聚焦元素，该元素是流动 tabindex 的一部分。
它的值可以设置为 false 以从移动 tabindex 中删除元素：
<button type="button" v-roving-tabindex="false />
Related work
@4rk/vue-roving-tabindex
Add a roving tabindex to a Vue component. This is useful to implement keyboard navigation inside components according to WAI-ARIA.
Installation
import VueRovingTabindex from "@4rk/vue-roving-tabindex";
Vue.use(VueRovingTabindex);
Usage
<template>
<ul v-roving-tabindex-container>
<li><button type="button" v-roving-tabindex>foo</button></li>
<li><button type="button" v-roving-tabindex>bar</button></li>
<li><button type="button" v-roving-tabindex>baz</button></li>
</ul>
</template>
Directive API
The package provides two Vue directives:
v-roving-tabindex-container
This directive denotes the boundary of a roving tabindex sequence. Add it to a parent element of the v-roving-tabindex elements.
It has a single boolean modifier to change the direction from vertical to horizontal:
<div v-roving-tabindex-container.horizontal />
v-roving-tabindex
This directive should be used on every focussable element inside a v-roving-tabindex-container that is part of the roving tabindex.
Its value can be set to false to remove the element from the roving tabindex:
<button type="button" v-roving-tabindex="false />
