底部導(dǎo)航欄,用于在不同頁面之間進(jìn)行切換。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';
const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);
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 };
},
};
設(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>
通過 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>
通過 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>
參數(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> | - |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 切換標(biāo)簽時(shí)觸發(fā) | active: number | string |
參數(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
|
名稱 | 說明 | 參數(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) | - |
更多建議: