介绍
vue-mixin-roving-tabindex 是一个 Vue Mixin，旨在为应用程序提供可访问的选项卡切换体验。
这个包提供了全部的 WAI-ARIA 规范下的选项卡切换逻辑，适用于任意类型的选项卡，包括传统的水平/垂直选项卡、抽屉式选项卡和导航菜单。
安装
npm install vue-mixin-roving-tabindex --save
使用
- 引入
vue-mixin-roving-tabindex：
import RovingTabindexMixin from 'vue-mixin-roving-tabindex'
- 在组件中使用
RovingTabindexMixin：
-- -------------------- ---- -------
------ ------- -
------- ----------------------
---- -- -
------ -
----------------- --
----- -
- ----- ------- ------ ---- --
- ----- -------- ------ ------ --
- ----- ---------- ------ ------ -
-
-
-
-- 在模板中渲染选项卡：
-- -------------------- ---- -------
----------
-----
---- ------------ ---------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
-------------------------
--- --------- -----------
------
-----
----
---------
---------------------- --- --
---------------
------------
-----------------------
-
---- -------
------
----
----------
---------------------- --- --
---------------
------------
-----------------------
-
----- -------
------
----
------------
---------------------- --- --
---------------
------------
-----------------------
-
------- -------
------
------
------
-----------选项卡类型
水平选项卡
水平选项卡是最简单的选项卡类型，所有的选项卡都在一个水平容器中。
-- -------------------- ---- -------
---- -------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
-------------------------
--- --------- -----------
------垂直选项卡
垂直选项卡是所有选项卡以垂直方式排列，所有选项卡共享相同的宽度。
-- -------------------- ---- -------
---- ----------- ----------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
-------------------------
--- --------- -----------
------抽屉式选项卡
抽屉式选项卡是垂直选项卡的一种变体，当选择一个选项卡后，对应内容抽屉打开，并覆盖下面的选项卡。开关按钮位于每个抽屉的顶部，点击该按钮将关闭抽屉。
-- -------------------- ---- -------
---- ----------- -----------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
------------------------------------
--- --------- -----------
----
------------ ------ -- -----
---------------
-------------------------
---------
----------- -----
--------------------- ---------------- --- ------
---------------------- ---------------- --- -----
--
---------------
--------------------------------
--- ----------- --------
------导航菜单
导航菜单是一种具有下拉子菜单的垂直选项卡。当选择一个主菜单选项卡时，在下拉列表中显示子菜单。点击子菜单选项卡将自动关闭下拉菜单。
-- -------------------- ---- -------
---- ----------- ------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
------------------------------------
-------------------------------
-
-- --------- -- ----- ------------------- ----------------------------------
---------
----
------------ ------ -- -----
---------------
-------------------------
---------
----------- -----
--------------------- ---------------- --- ------
---------------------- ---------------- --- -----
--
---------------
---------------------------------
-
--- ------------------- ------------
---
-------------- ----------- -- -------------
-----------------
------------------------------------
--------- ------------ ---- --
---------------
-
--
------------------
-----------------
------------------------------------- ------------
--- ----------- ------
-----
-----
---- --------- ----------- --------
------
------示例
HTML
-- -------------------- ---- -------
----------
---- ------------------
---------- -------------
-------- ----- ----- --- ----- ----------- ----------- ----- ----- ------- -------------- --------- --- ------ ------- -- --------- -- ------- ---- ------ ----- ---------- ------- --------- --- ------ --- ----- ----------
---- -------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
-------------------------
--- --------- -----------
------
-----
----
---------
---------------------- --- --
---------------
------------
-----------------------
-
---- -------
------
----
----------
---------------------- --- --
---------------
------------
-----------------------
-
----- -------
------
----
------------
---------------------- --- --
---------------
------------
-----------------------
-
------- -------
------
------
------
-----------CSS
-- -------------------- ---- ------- ----- - -------- ----- ---------- ----- ---------------- ----------- ------- -- -------- -- ----------- ----- - ---- - ------- - ----- -------- --- ----- ---------- ----- - -------------- - ------ -------- -------------- --- ----- -------- - ---------- - --------- --------- - ----------------- - -------- ------ --------- --------- -------- --- ---- ---- ------ ----- ------ -- ------- -- ----------- ----- ----------- --- ------ ------------- --- ----- ------------ -------------- - ----- ------------ ------------ --- ----- ------------ - ----------- ---------- - -------- ------ --------- --------- - ---------- - -------- ------ -------- --- ----- ------ ----- ------------ ------- -------------- --------- --------- ------- - ----------------- - -------- ------ --------- --------- ---- ---- ------ ----- -------- --- ---------- ---------------- -------------- ------ ---- ------- ---- ----------- --- ----- ----- ------------- --- ----- ----- - --------- - ----------- ----- ------------ ---- ----------- --- ----- ----- - -------------------- - -------- ----- -
JavaScript
-- -------------------- ---- -------
----------
---- ------------------
---------- -------------
-------- ----- ----- --- ----- ----------- ----------- ----- ----- ------- -------------- --------- --- ------ ------- -- --------- -- ------- ---- ------ ----- ---------- ------- --------- --- ------ --- ----- ----------
---- -------------
-------
------------ ------ -- -----
---------------
-------------------------
--------------------
---------
------ -----
---------------- ---------------- --- -----
--
-------------------------------- --- ------
------------------------------
----------
-------------------------
--- --------- -----------
------
-----
----
---------
---------------------- --- --
---------------
------------
-----------------------
-
---- -------
------
----
----------
---------------------- --- --
---------------
------------
-----------------------
-
----- -------
------
----
------------
---------------------- --- --
---------------
------------
-----------------------
-
------- -------
------
------
------
-----------
--------
------ ------------------- ---- ---------------------------
------ ------- -
------- ----------------------
---- -- -
------ -
----------------- --
----- -
- ----- ------- ------ ------ --
- ----- -------- ------ ------- --
- ----- ---------- ------ --------- -
-
-
-
-
---------
-------
----- -
-------- -----
---------- -----
---------------- -----------
------- --
-------- --
----------- -----
-
---- -
------- - -----
-------- --- -----
---------- -----
-
-------------- -
------ --------
-------------- --- ----- --------
-
---------- -
--------- ---------
-
----------------- -
-------- ------
--------- ---------
-------- ---
---- ----
------ -----
------ --
------- --
----------- -----
----------- --- ------
------------- --- ----- ------------
-------------- - ----- ------------
------------ --- ----- ------------
-
----------- ---------- -
-------- ------
--------- ---------
-
---------- -
-------- ------
-------- --- -----
------ -----
------------ -------
-------------- ---------
--------- -------
-
----------------- -
-------- ------
--------- ---------
---- ----
------ -----
-------- ---
---------- ---------------- --------------
------ ----
------- ----
----------- --- ----- -----
------------- --- ----- -----
-
--------- -
----------- -----
------------ ----
----------- --- ----- -----
-
-------------------- -
-------- -----
-
--------在这个例子中，RovingTabindexMixin 为每个选项卡和选项卡内容元素自动添加了所需的 WAI-ARIA 属性和 tabindex 属性。 您可以自由定义选项卡的 HTML 结构，并定义您自己的样式规则，而无需担心选项卡切换逻辑的实现。
自由选择不同的选项卡类型以适应您的设计。我们强烈建议使用已提供的选项卡类型，并遵循 WAI-ARIA 的建议。
结论
如上所述，npm 包 vue-mixin-roving-tabindex 提供了可访问的选项卡切换体验。 这个简单易用的解决方案展示了如何使用 Vue Mixin 创建可访问的组件。
现在，您可以轻松地将此 Mixin 应用于您的下一个 Vue.js 项目中，以使您的应用程序更加易于使用和无障碍化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e3884