從零實現Vue的組件庫（三）-Tabs 實現

實現一個Tab組件，方便用戶點擊切換相關內容。

概述：Tab組件主要用來分割相關內容，方便用戶點擊切換，進一步遊覽不同類別的內容。

該組件的痛點在於：

• 內容的分發，方便自定義擴展；
• 動態擴展Tabs組件。

基礎用法

卡片樣式

1. 實例

代碼

代碼

實例地址：https://fatge.xyz/blog/juejin-example-3#/Tabs

代碼地址：https://github.com/FatGe/UI-Library/tree/master/src/components/Tabs

2. 原理

主要將該組件拆分為兩部分：

• 外層的Tabs用於管理data；
• 內部的Tab用於分發內容。

組件的基本結構如下圖

組件的基本結構

基於這個結構，構建代碼，首先

• Tab：

Tab

• 當Tab組件created時，通過this.$parent與Tabs通信，更新childrens，而destroyed時，將其從childrens中刪除。

• 當前active的選項卡的id，與Tab的id相同時，證明展開的是當前選項卡。

當前active的選項卡的id，與Tab的id相同時，證明展開的是當前選項卡。

• Tabs： Tabs組件的childrens中包含所有的子Tab組件，利用它來構建選項卡

Tabs組件的childrens中包含所有的子Tab組件，利用它來構建選項卡

• 與Tab組件相同，當滿足activeId === item.id時，代表當前選項卡活躍。
• 當childrens動態變化時，需要判斷當前顯示的Tab是否還在childrens內，如果不在則選取第一個非disabled的Tab作為顯示項。

• 由於以id作為key，所以要求id唯一，添加異常提示

由於以id作為key，所以要求id唯一，添加異常提示

3. 使用

進一步將其封裝成Vue的組件，配置其model，以及相關處理，當value發生變化時，將其賦值給activeId，相關Tab會自動更新。

進一步將其封裝成Vue的組件

4. 總結

封裝一個Tabs組件，以及簡化其內部邏輯，方便後續拓展。

PS：在最開始實現時，想添加一個功能就是，緩存指定Tab組件，除了keep-alive沒有想到合適的方法，如果有好的想法，可以在評論給我，我會重寫這個組件。

作者：FatGe