前言
在前端开发中，Tab 标签页的使用频率极高，大多数情况下需要手写或使用 UI 库中的组件，本文将介绍一款轻量级的 npm 包 wj-tabs，使用它可以方便快捷地实现 Tab 标签页组件的开发。
简介
wj-tabs 是一款 Vue.js 组件，支持动态添加和删除 Tab，可在 Tab 中自由切换，还可以使用 keep-alive 实现 Tab 缓存，适用于大多数业务场景中数据量不是很大的 Tab 切换页面。
安装
你可以使用 npm 安装 wj-tabs：
--- ------- ------- ------
快速入门
引入组件
------ ------ ---- ---------- ----------------
基本用法
-------- ---------------------- ------------ -------------------------------- ------------ -------------------------------- ------------ -------------------------------- ----------
------ ------- -
------ -
------ -
------------ -
-
-
-动态添加、删除 Tab
-------- ---------------------- ------------ -------------------------------- ------------ -------------------------------- ------------ -------------- -------------------------------- ----------
------ ------- -
------ -
------ -
------------ --
-------- -----
-
--
-------- -
-------- -
------------ - -----
--
----------- -
------------ - ------
-
-
-缓存 Tab
-------- ---------------------- ------------ -------------------------------- ------------ -------------------------------- ------------ ----------- ------------------------------- ----------
API
wj-tabs
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| v-model | Number | 是 | 当前激活 tab 的索引 |
| transition | String | 否 | 切换动画的类名 |
| type | String | 否 | 样式风格，可选值有 'card'、'border-card'、'noborder-card' 和 'line' |
wj-tab-pane
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| label | String | 是 | 标题 |
| disabled | Boolean | 否 | 是否禁用 |
| keep-alive | Boolean | 否 | 是否开启缓存 |
结语
wj-tabs 是一款非常适合快速开发 Tab 标签页组件的 npm 包，它是一个轻量级的 Vue.js 组件，拥有丰富的 API，可以满足大多数业务场景需求。感谢您阅读本文，希望对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e4d9381d61a3540a88