前言
在前端开发中，Tab 标签页的使用频率极高，大多数情况下需要手写或使用 UI 库中的组件，本文将介绍一款轻量级的 npm 包 wj-tabs，使用它可以方便快捷地实现 Tab 标签页组件的开发。
简介
wj-tabs 是一款 Vue.js 组件，支持动态添加和删除 Tab，可在 Tab 中自由切换，还可以使用 keep-alive 实现 Tab 缓存，适用于大多数业务场景中数据量不是很大的 Tab 切换页面。
安装
你可以使用 npm 安装 wj-tabs：
npm install wj-tabs --save
快速入门
引入组件
import wjTabs from 'wj-tabs'; Vue.use(wjTabs);
基本用法
<wj-tabs v-model="activeIndex"> <wj-tab-pane label="标签一">标签一的内容</wj-tab-pane> <wj-tab-pane label="标签二">标签二的内容</wj-tab-pane> <wj-tab-pane label="标签三">标签三的内容</wj-tab-pane> </wj-tabs>
export default {
data() {
return {
activeIndex: 0
}
}
}动态添加、删除 Tab
<wj-tabs v-model="activeIndex"> <wj-tab-pane label="标签一">标签一的内容</wj-tab-pane> <wj-tab-pane label="标签二">标签二的内容</wj-tab-pane> <wj-tab-pane v-if="showTab" label="标签三">标签三的内容</wj-tab-pane> </wj-tabs>
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------------ --
-------- -----
-
--
-------- -
-------- -
------------ - -----
--
----------- -
------------ - ------
-
-
-缓存 Tab
<wj-tabs v-model="activeIndex"> <wj-tab-pane label="标签一">标签一的内容</wj-tab-pane> <wj-tab-pane label="标签二">标签二的内容</wj-tab-pane> <wj-tab-pane label="标签三" keep-alive>标签三的内容</wj-tab-pane> </wj-tabs>
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