介绍
vue-swipeable-tab 是一个基于 Vue 的可滑动标签页组件，支持标签页之间的切换和滑动切换，可定制化的样式，轻松实现标签页的设计。
安装
可以通过 NPM 进行安装 vue-swipeable-tab，安装命令如下：
npm install vue-swipeable-tab --save
使用
引入组件
在 vue 组件中引入 vue-swipeable-tab 组件，代码如下：
-- -------------------- ---- -------
----------
-----
------------------
-------------------
-------------------------
---------------------
------------------------
--
------
-----------
--------
------ -------------- ---- -------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- -
- ------ ------ ----- -------------- --
- ------ ------ ----- --------------- --
- ------ ------ ----- ------------- --
- ------ ------ ----- ------------ --
- ------ ------ ----- ------------ --
- ------ ------ ----- -------------- --
- ------ ------ ----- ------------- --
- ------ ------ ----- --------- --
- ------ ------ ----- ------------- -
--
----------- --
--------- -
-
--
-------- -
------------------ -
------------------
-
-
-
---------参数说明
tabList：数组，表示标签页数组，其中每个元素必须包含title和icon两个属性，title表示标签页的标题，icon表示标签页的图标，使用 class 名称或者是图标库的 sprite 名称；currentTab：数字，表示当前选中的标签页的索引；tabsShow：数字，表示同时显示的标签页数量；tabChange：事件，表示切换标签页时的回调函数，参数为当前选中的标签页的索引。
样式定制
vue-swipeable-tab 组件提供了多个样式类，可以通过覆盖这些样式类进行样式的定制。
-- -------------------- ---- ------- ------------------ - -- -------- -- - --------------------------- - -- ---- -- - ---------------------------- - -- ----- -- - ---------------------------- - -- -------- -- - ---------------------------- - -- -------- -- - ------------------------ - -- -------- -- - -------------------------- - -- ----------- -- - ----------------------------------- - -- ----------- -- -
示例代码
完整示例代码如下：
-- -------------------- ---- -------
----------
-----
------------------
-------------------
-------------------------
---------------------
------------------------
--
------
-----------
--------
------ -------------- ---- -------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- -
- ------ ------ ----- -------------- --
- ------ ------ ----- --------------- --
- ------ ------ ----- ------------- --
- ------ ------ ----- ------------ --
- ------ ------ ----- ------------ --
- ------ ------ ----- -------------- --
- ------ ------ ----- ------------- --
- ------ ------ ----- --------- --
- ------ ------ ----- ------------- -
--
----------- --
--------- -
-
--
-------- -
------------------ -
------------------
-
-
-
---------
------ -------
------------------ -
-------------- --- ----- --------
-
---------------------------- -
---------- -----
-
---------------------------- -
------------- -----
-------------- -----
-
------------------------------------------------------ -
------ --------
-------------- --- ----- --------
-
---------------------------- -
------ -----
---------- -----
----------- ------------------- ---- ------------
-
---------------------------------- -
------ --------
-------------------- --------
-
------------------------ -
---------- -----
------------- ----
-
--------总结
vue-swipeable-tab 提供了一种方便实用的标签页组件，在项目的开发中可以大大提高效率和开发效果。本文对 vue-swipeable-tab 的使用做了详细的介绍和说明，希望能对大家的项目开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e3187