基礎(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>

export default {
  data() {
    return {
      active: 0,
    };
  },
};

通過名稱匹配

在標(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>

export default {
  data() {
    return {
      active: 'home',
    };
  },
};

徽標(biāo)提示

設(shè)置 dot 屬性后，會在圖標(biāo)右上角展示一個小紅點；設(shè)置 badge 屬性后，會在圖標(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>

export default {
  data() {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
};

自定義顏色

<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
  <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)聽切換事件

<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 { Notify } from 'vant';

export default {
  methods: {
    onChange(index) {
      Notify({ type: 'primary', message: index });
    },
  },
};

路由模式

標(biāo)簽欄支持路由模式，用于搭配 vue-router 使用。路由模式下會匹配頁面路徑和標(biāo)簽的 to 屬性，并自動選中對應(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>

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。