Vant3 Tab 標(biāo)簽頁(yè)

介紹

選項(xiàng)卡組件，用于在不同的內(nèi)容區(qū)域之間進(jìn)行切換。

實(shí)例演示

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';

const app = createApp();
app.use(Tab);
app.use(Tabs);

代碼演示

基礎(chǔ)用法

通過(guò) v-model:active 綁定當(dāng)前激活標(biāo)簽對(duì)應(yīng)的索引值，默認(rèn)情況下啟用第一個(gè)標(biāo)簽。

<van-tabs v-model:active="active">
  <van-tab title="標(biāo)簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標(biāo)簽 2">內(nèi)容 2</van-tab>
  <van-tab title="標(biāo)簽 3">內(nèi)容 3</van-tab>
  <van-tab title="標(biāo)簽 4">內(nèi)容 4</van-tab>
</van-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(2);
    return { active };
  },
};

通過(guò)名稱(chēng)匹配

在標(biāo)簽指定 name 屬性的情況下，v-model:active 的值為當(dāng)前標(biāo)簽的 name（此時(shí)無(wú)法通過(guò)索引值來(lái)匹配標(biāo)簽）。

<van-tabs v-model:active="activeName">
  <van-tab title="標(biāo)簽 1" name="a">內(nèi)容 1</van-tab>
  <van-tab title="標(biāo)簽 2" name="b">內(nèi)容 2</van-tab>
  <van-tab title="標(biāo)簽 3" name="c">內(nèi)容 3</van-tab>
</van-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('a');
    return { activeName };
  },
};

標(biāo)簽欄滾動(dòng)

標(biāo)簽數(shù)量超過(guò) 5 個(gè)時(shí)，標(biāo)簽欄可以在水平方向上滾動(dòng)，切換時(shí)會(huì)自動(dòng)將當(dāng)前標(biāo)簽居中。

<van-tabs v-model:active="active">
  <van-tab v-for="index in 8" :title="'標(biāo)簽 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

禁用標(biāo)簽

設(shè)置 disabled 屬性即可禁用標(biāo)簽。

<van-tabs v-model:active="active">
  <van-tab title="標(biāo)簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標(biāo)簽 2" disabled>內(nèi)容 2</van-tab>
  <van-tab title="標(biāo)簽 3">內(nèi)容 3</van-tab>
</van-tabs>

樣式風(fēng)格

Tab 支持兩種樣式風(fēng)格：line 和card，默認(rèn)為 line 樣式，可以通過(guò) type 屬性切換樣式風(fēng)格。

<van-tabs v-model:active="active" type="card">
  <van-tab title="標(biāo)簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標(biāo)簽 2">內(nèi)容 2</van-tab>
  <van-tab title="標(biāo)簽 3">內(nèi)容 3</van-tab>
</van-tabs>

點(diǎn)擊事件

點(diǎn)擊標(biāo)簽頁(yè)時(shí)，會(huì)觸發(fā) click-tab 事件。

<van-tabs v-model:active="active" @click-tab="onClickTab">
  <van-tab title="標(biāo)簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標(biāo)簽 2">內(nèi)容 2</van-tab>
</van-tabs>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onClickTab = ({ title }) => Toast(title);
    return {
      active,
      onClickTab,
    };
  },
};

粘性布局

通過(guò) sticky 屬性可以開(kāi)啟粘性布局，粘性布局下，標(biāo)簽頁(yè)滾動(dòng)到頂部時(shí)會(huì)自動(dòng)吸頂。

<van-tabs v-model:active="active" sticky>
  <van-tab v-for="index in 4" :title="'選項(xiàng) ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

自定義標(biāo)簽

通過(guò) title 插槽可以自定義標(biāo)簽內(nèi)容。

<van-tabs v-model:active="active">
  <van-tab v-for="index in 2">
    <template #title> <van-icon name="more-o" />選項(xiàng) </template>
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

切換動(dòng)畫(huà)

通過(guò) animated 屬性可以開(kāi)啟切換標(biāo)簽內(nèi)容時(shí)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

<van-tabs v-model:active="active" animated>
  <van-tab v-for="index in 4" :title="'選項(xiàng) ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

滑動(dòng)切換

通過(guò) swipeable 屬性可以開(kāi)啟滑動(dòng)切換標(biāo)簽頁(yè)。

<van-tabs v-model:active="active" swipeable>
  <van-tab v-for="index in 4" :title="'選項(xiàng) ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

滾動(dòng)導(dǎo)航

通過(guò) scrollspy 屬性可以開(kāi)啟滾動(dòng)導(dǎo)航模式，該模式下，內(nèi)容將會(huì)平鋪展示。

<van-tabs v-model:active="active" scrollspy sticky>
  <van-tab v-for="index in 8" :title="'選項(xiàng) ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

異步切換

通過(guò) before-change 屬性可以在切換標(biāo)簽前執(zhí)行特定的邏輯。

<van-tabs v-model:active="active" :before-change="beforeChange">
  <van-tab v-for="index in 4" :title="'選項(xiàng) ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const beforeChange = (index) => {
      // 返回 false 表示阻止此次切換
      if (index === 1) {
        return false;
      }

      // 返回 Promise 來(lái)執(zhí)行異步邏輯
      return new Promise((resolve) => {
        // 在 resolve 函數(shù)中返回 true 或 false
        resolve(index !== 3);
      });
    };

    return {
      beforeChange,
    };
  },
};

Tips: 通過(guò)手勢(shì)滑動(dòng)不會(huì)觸發(fā) before-change 屬性。

API

Tabs Props

Tab Props

Tabs Events

提示：click 和 disabled 事件已廢棄，請(qǐng)使用 click-tab 事件代替。

Tabs 方法

通過(guò) ref 可以獲取到 Tabs 實(shí)例并調(diào)用實(shí)例方法，詳見(jiàn)組件實(shí)例方法。

類(lèi)型定義

通過(guò) TabsInstance 獲取 Tabs 實(shí)例的類(lèi)型定義。

import { ref } from 'vue';
import type { TabsInstance } from 'vant';

const tabsRef = ref<TabsInstance>();

tabsRef.value?.scrollTo(0);

Tabs Slots

Tab Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見(jiàn)問(wèn)題

組件從隱藏狀態(tài)切換到顯示狀態(tài)時(shí)，底部條位置錯(cuò)誤？

Tabs 組件在掛載時(shí)，會(huì)獲取自身的寬度，并計(jì)算出底部條的位置。如果組件一開(kāi)始處于隱藏狀態(tài)，則獲取到的寬度永遠(yuǎn)為 0，因此無(wú)法展示底部條位置。

解決方法

方法一，如果是使用 v-show 來(lái)控制組件展示的，則替換為 v-if 即可解決此問(wèn)題：

<!-- Before -->
<van-tabs v-show="show" />
<!-- After -->
<van-tabs v-if="show" />

方法二，調(diào)用組件的 resize 方法來(lái)主動(dòng)觸發(fā)重繪：

<van-tabs v-show="show" ref="tabs" />

this.$refs.tabs.resize();