Vant3 Tabbar 標(biāo)簽欄

2021-09-14 11:06 更新

介紹

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

實(shí)例演示

引入

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

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 屬性后,會在圖標(biāo)右上角展示一個(gè)小紅點(diǎn);設(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>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: 'https://img.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
    };
    return {
      icon,
      active,
    };
  },
};

自定義顏色

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

<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)聽切換事件

通過 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 { Toast } from 'vant';

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

路由模式

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

參數(shù) 說明 類型 默認(rèn)值
v-model 當(dāng)前選中標(biāo)簽的名稱或索引值 number | string 0
fixed 是否固定在底部 boolean true
border 是否顯示外邊框 boolean true
z-index 元素 z-index number | string 1
active-color 選中標(biāo)簽的顏色 string #1989fa
inactive-color 未選中標(biāo)簽的顏色 string #7d7e80
route 是否開啟路由模式 boolean false
placeholder 固定在底部時(shí),是否在標(biāo)簽位置生成一個(gè)等高的占位元素 boolean false
safe-area-inset-bottom 是否開啟底部安全區(qū)適配,設(shè)置 fixed 時(shí)默認(rèn)開啟 boolean false
before-change 切換標(biāo)簽前的回調(diào)函數(shù),返回 false 可阻止切換,支持返回 Promise (name: number | string) => boolean | Promise<boolean> -

Tabbar Events

事件名 說明 回調(diào)參數(shù)
change 切換標(biāo)簽時(shí)觸發(fā) active: number | string

TabbarItem Props

參數(shù) 說明 類型 默認(rèn)值
name 標(biāo)簽名稱,作為匹配的標(biāo)識符 number | string 當(dāng)前標(biāo)簽的索引值
icon 圖標(biāo)名稱或圖片鏈接 string -
icon-prefix 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 string van-icon
dot 是否顯示圖標(biāo)右上角小紅點(diǎn) boolean false
badge 圖標(biāo)右上角徽標(biāo)的內(nèi)容 number | string -
url 點(diǎn)擊后跳轉(zhuǎn)的鏈接地址 string -
to 點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)路由對象,等同于 vue-router 的 to 屬性 string | object -
replace 是否在跳轉(zhuǎn)時(shí)替換當(dāng)前頁面歷史 boolean false

TabbarItem Slots

名稱 說明 參數(shù)
icon 自定義圖標(biāo) active: boolean

樣式變量

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

名稱 默認(rèn)值 描述
--van-tabbar-height 50px -
--van-tabbar-z-index 1 -
--van-tabbar-background-color var(--van-white) -
--van-tabbar-item-font-size var(--van-font-size-sm) -
--van-tabbar-item-text-color var(--van-gray-7) -
--van-tabbar-item-active-color var(--van-primary-color) -
--van-tabbar-item-active-background-color var(--van-white) -
--van-tabbar-item-line-height 1 -
--van-tabbar-item-icon-size 22px -
--van-tabbar-item-icon-margin-bottom var(--van-padding-base) -


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號