May 07, 2021 Vant
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
The v-model default binds the index value of the selected label, and you can switch the selected label by modifying the 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>
export default {
data() {
return {
active: 0
}
}
}
The value of v-model is the name of the current label when the label specifies the name property
<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>
export default {
data() {
return {
active: 'home'
}
}
}
When you set the dot property, a small red dot appears in the upper right corner of the icon. When you set the info property, the logo appears in the upper right corner of the icon
<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" info="5">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>
Custom icons with icon slots allow you to determine if a label is selected by slot-scope
<van-tabbar v-model="active">
<van-tabbar-item info="3">
<span>自定义</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.active : icon.inactive"
>
</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
data() {
return {
active: 0,
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
}
<van-tabbar
v-model="active"
active-color="#07c160"
inactive-color="#000"
>
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="freinds-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
<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="freinds-o">标签3</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
</van-tabbar>
import { Notify } from 'vant';
export default {
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
}
}
}
The tab bar supports routing patterns for use with vue-router. The to properties of the page path and label are matched in routing mode, and the corresponding label is automatically selected
<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>
Parameters | Description | Type | The default |
---|---|---|---|
v-model | The name or index value of the label is currently selected | number | string |
0
|
fixed | Whether fixed to the bottom | boolean |
true
|
border | Whether to display the outer border | boolean |
true
|
z-index | Element z-index | number | string |
1
|
active-color | Check the color of the label | string |
#1989fa
|
inactive-color | The color of the label is not selected | string |
#7d7e80
|
route | Whether to turn on routing mode | boolean |
false
|
safe-area-inset-bottom | Whether to turn on the bottom safety zone to fit | boolean |
false
|
The name of the event | Description | Callback parameters |
---|---|---|
change | Triggered when switching labels | Active: The name or index value of the label is currently selected |
Parameters | Description | Type | The default |
---|---|---|---|
name | Label name, as a matching identifier | number | string | The index value of the current label |
icon | Icon name or picture link | string | - |
dot | Whether to display a small red dot in the upper right corner of the icon | boolean |
false
|
info | The contents of the logo in the upper right corner of the icon | number | string | - |
Url | Click on the link address that jumps | string | - |
to | Click to jump the target routing object, with the to property of vue-router | string | object | - |
replace | Whether to replace the current page history when jumping | boolean |
false
|
Name | Description | SlotProps |
---|---|---|
icon | Custom icons | Active: Whether the label is selected or not |