Vant4 Tabbar 標(biāo)簽欄

介紹

底部導(dǎo)航欄，用于在不同頁面之間進(jìn)行切換。

引入

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

import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';

const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);

代碼演示

基礎(chǔ)用法

?v-model? 默認(rèn)綁定選中標(biāo)簽的索引值，通過修改 ?v-model? 即可切換選中的標(biāo)簽。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="search">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="friends-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="setting-o">標(biāo)簽</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

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

通過名稱匹配

在標(biāo)簽指定 ?name? 屬性的情況下，?v-model? 的值為當(dāng)前標(biāo)簽的 ?name?。

<van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="home-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item name="search" icon="search">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item name="friends" icon="friends-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item name="setting" icon="setting-o">標(biāo)簽</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

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

徽標(biāo)提示

設(shè)置 ?dot? 屬性后，會(huì)在圖標(biāo)右上角展示一個(gè)小紅點(diǎn)；設(shè)置 ?badge? 屬性后，會(huì)在圖標(biāo)右上角展示相應(yīng)的徽標(biāo)。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="search" dot>標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="friends-o" badge="5">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="setting-o" badge="20">標(biāo)簽</van-tabbar-item>
</van-tabbar>

自定義圖標(biāo)

通過 ?icon? 插槽自定義圖標(biāo)，可以通過 ?slot-scope? 判斷標(biāo)簽是否選中。

<van-tabbar v-model="active">
  <van-tabbar-item badge="3">
    <span>自定義</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="setting-o">標(biāo)簽</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    return {
      icon,
      active,
    };
  },
};

自定義顏色

通過 ?active-color? 屬性設(shè)置選中標(biāo)簽的顏色，通過 ?inactive-color? 屬性設(shè)置未選中標(biāo)簽的顏色。

<van-tabbar v-model="active" active-color="#ee0a24">
  <van-tabbar-item icon="home-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="search">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="friends-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="setting-o">標(biāo)簽</van-tabbar-item>
</van-tabbar>

監(jiān)聽切換事件

通過 ?change? 事件來監(jiān)聽選中標(biāo)簽的變化。

<van-tabbar v-model="active" @change="onChange">
  <van-tabbar-item icon="home-o">標(biāo)簽 1</van-tabbar-item>
  <van-tabbar-item icon="search">標(biāo)簽 2</van-tabbar-item>
  <van-tabbar-item icon="friends-o">標(biāo)簽 3</van-tabbar-item>
  <van-tabbar-item icon="setting-o">標(biāo)簽 4</van-tabbar-item>
</van-tabbar>

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

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`標(biāo)簽 ${index}`);
    return {
      icon,
      onChange,
    };
  },
};

路由模式

標(biāo)簽欄支持路由模式，用于搭配 ?vue-router? 使用。路由模式下會(huì)匹配頁面路徑和標(biāo)簽的 ?to? 屬性，并自動(dòng)選中對(duì)應(yīng)的標(biāo)簽。

<router-view />

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">標(biāo)簽</van-tabbar-item>
</van-tabbar>

API

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

類型定義

組件導(dǎo)出以下類型定義：

import type { TabbarProps, TabbarItemProps } from 'vant';

主題定制

樣式變量

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