Vant4 Tabbar 標簽欄

介紹

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

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

?v-model? 默認綁定選中標簽的索引值，通過修改 ?v-model? 即可切換選中的標簽。

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

import { ref } from 'vue';

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

通過名稱匹配

在標簽指定 ?name? 屬性的情況下，?v-model? 的值為當前標簽的 ?name?。

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

import { ref } from 'vue';

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

徽標提示

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

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

自定義圖標

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

<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">標簽</van-tabbar-item>
  <van-tabbar-item icon="setting-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è)置選中標簽的顏色，通過 ?inactive-color? 屬性設(shè)置未選中標簽的顏色。

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

監(jiān)聽切換事件

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

<van-tabbar v-model="active" @change="onChange">
  <van-tabbar-item icon="home-o">標簽 1</van-tabbar-item>
  <van-tabbar-item icon="search">標簽 2</van-tabbar-item>
  <van-tabbar-item icon="friends-o">標簽 3</van-tabbar-item>
  <van-tabbar-item icon="setting-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(`標簽 ${index}`);
    return {
      icon,
      onChange,
    };
  },
};

路由模式

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

<router-view />

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

API

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

類型定義

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

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

主題定制

樣式變量

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