前言
在前端开发中，常常需要使用到选项卡来展示多个信息或内容，但是自己写一个选项卡组件有时候会比较麻烦，这时候一个已经存在的 npm 包就可以大大减轻工作量，而 vbl-tabs 就是其中一个选项卡组件。
简介
vbl-tabs 是一个易用的选项卡组件，提供了多个选项卡、滑块、自定义样式等功能。vbl-tabs 完全使用 CSS3 和原生 JavaScript 实现，不需要依赖其他框架，可以轻松地集成到你的项目中。
安装
在使用 vbl-tabs 之前，需要先在项目中安装该包，打开终端并进入项目目录，执行以下命令即可安装：
npm install vbl-tabs
安装完成后，即可在项目中引入 vbl-tabs：
import Tabs from 'vbl-tabs';
使用
HTML 结构
使用 vbl-tabs 首先需要准备 HTML 结构，结构如下：
-- -------------------- ---- -------
---- ------------------ ----------------
---- ---------------- --------------
---- ---------------- --------------
---- -------------------- ------- ------------------------------
---- --------------------- ------------------------------
---- --------------------- ------------------------------
------
---- ---------------- --------------
---- ----------------- ------- --------------------------
---- ------------------ --------------------------
---- ------------------ --------------------------
------
------
------在这里，.t_t_father 是选项卡容器，它包含选项卡头和选项卡内容两部分，其中 .t_t_head 是选项卡头，.t_t_body 是选项卡内容，.active 类表示当前选中的选项卡和内容。
实例化
使用 vbl-tabs 需要先实例化，实例化方式如下：
const tab = new Tabs('#t_t_father', {
color: '#333333',
activeColor: '#ff633d',
showSlider: true,
sliderHeight: 2
});在这里，#t_t_father 是选项卡容器的选择器，第二个参数是配置参数，包含以下属性：
color：选项卡字体颜色activeColor：当前选中选项卡字体颜色showSlider：是否显示滑块sliderHeight：滑块高度
方法
vbl-tabs 提供了一些常用的方法，可以通过实例化的对象来调用：
switchTo
切换选项卡和内容：
tab.switchTo(index);
其中 index 是选项卡和内容的索引，从 1 开始。
prev
切换到上一个选项卡和内容：
tab.prev();
next
切换到下一个选项卡和内容：
tab.next();
事件
vbl-tabs 对外提供了两个事件：
changed
选项卡切换完成时触发。
tab.on('changed', (currentIndex, prevIndex) => {
console.log(`从 ${ prevIndex } 切换到 ${ currentIndex }`);
})其中 currentIndex 表示当前选项卡和内容的索引，prevIndex 表示之前选中选项卡和内容的索引。
click
点击选项卡时触发。
tab.on('click', (index) => {
console.log(`点击了 ${ index } 选项卡`);
})其中 index 表示当前选中选项卡和内容的索引。
示例
下面提供一个具体的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
----- --------------- --
-------
-- ----- --
----------- -
------ ------
------- - -----
-
-- ---- --
--------- -
-------- -----
---------------- --------------
------------ -------
-------- ---- --
-------------- --- ----- --------
-
-- ------ --
-------------- -
------- --------
---------- -----
------ --------
-
-- --------- --
--------------------- -
------ --------
-
-- ----- --
----------- -
-------- -----
-------- -----
-
-- -------- --
------------------ -
-------- ------
-
-- -- --
--------- -
--------- ---------
-
----------- -
--------- ---------
------- --
----- --
------- ----
----------------- --------
-
--------
-------
------
---- ------------------ ----------------
---- ---------------- --------------
---- ---------------- --------------
---- -------------------- ------- ------------------------------
---- --------------------- ------------------------------
---- --------------------- ------------------------------
------
---- ---------------- --------------
---- ----------------- ------- --------------------------
---- ------------------ --------------------------
---- ------------------ --------------------------
------
---- ------------------ ----------------------
------
------
------- ------------------------------------------------------------
--------
----- --- - --- ------------------- -
------ ----------
------------ ----------
----------- -----
------------- -
---
----------------- -------------- ---------- -- -
-------------- ------------ --- ------------------
--
---------
-------
-------结语
通过学习上述内容，我们已经了解了 npm 包 vbl-tabs 的使用方法，此时我们已经能够快速地在项目中添加选项卡组件，提高开发效率。同时，我们也可以自己根据需求扩展和改造 vbl-tabs，达到更加符合业务逻辑和美观的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005582881e8991b448d554a