May 07, 2021 Vant
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
The first label is enabled by default by binding the index value for the currently activated label with
v-model
binding
<van-tabs v-model="active">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
export default {
data() {
return {
active: 2
};
}
}
Where the label specifies the name property,
v-model
is the name of the current label
<van-tabs v-model="activeName">
<van-tab title="标签 1" name="a">内容 1</van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
export default {
data() {
return {
activeName: 'a'
};
}
}
When the number of labels exceeds 4, the tab bar scrolls horizontally, automatically centering the current label when switching
<van-tabs>
<van-tab v-for="index in 8" :title="'标签 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
Set
disabled
to disable the label.
If you need to listen for tab-disabled click events, you can listen for
disabled
events on
van-tabs
<van-tabs @disabled="onClickDisabled">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2" disabled>内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
import { Toast } from 'vant';
export default {
methods: {
onClickDisabled(name, title) {
Toast(name + '已被禁用');
}
}
};
Tab supports two style styles:
line
card
default to line styles, and you can modify the style style with the
type
property
<van-tabs type="card">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
Click events can be bound on
van-tabs
with the event pass-through as the index and title for the label
click
<van-tabs @click="onClick">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
</van-tabs>
import { Toast } from 'vant';
export default {
methods: {
onClick(name, title) {
Toast(title);
}
}
};
The
sticky
opens the sticky layout, under which the tab automatically tops when it scrolls to the top
<van-tabs v-model="active" sticky>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
The
title
allows you to customize the label content
<van-tabs v-model="active">
<van-tab v-for="index in 2">
<div slot="title">
<van-icon name="more-o" />选项
</div>
内容 {{ index }}
</van-tab>
</van-tabs>
The
animated
allows you to turn on transition animations when switching label content
<van-tabs v-model="active" animated>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
The
swipeable
allows you to turn on the swipe toggle tab
<van-tabs v-model="active" swipeable>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
Scroll navigation mode can be turned on with the
scrollspy
property, where the content is tiled
<van-tabs v-model="active" scrollspy sticky>
<van-tab v-for="index in 8" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
| Parameters | Description | Type | The default |
|---|---|---|---|
| v-model | Bind the identifier of the currently selected label | number | string |
0
|
| type |
Style style type, optional value is
card
|
string |
line
|
| color | Label theme color | string |
#ee0a24
|
| background | The label bar background color | string |
white
|
| duration | Animation time, in seconds | number | string |
0.3
|
| line-width |
The width of the bottom bar, the default
px
|
number | string |
auto
|
| line-height |
The bottom bar height, the default
px
|
number | string |
3px
|
| animated | Turn on transition animations when switching label content | boolean |
false
|
| border |
Whether to display the outer border of the label bar is
type="line"
|
boolean |
true
|
| ellipsis | Whether to omit too long the title text | boolean |
true
|
| sticky | Whether to use stickiness to position the layout | boolean |
false
|
| swipeable | Whether to turn on gesture swipe switching | boolean |
false
|
| lazy-render | Whether to turn on delayed rendering (triggers content rendering the first time you switch to a label) | boolean |
true
|
scrollspy
v2.3.0
|
Whether to turn on scroll navigation | boolean |
false
|
| offset-top |
The minimum distance from the top,
px
under the sticky positioning layout
|
number | string |
0
|
| swipe-threshold | Scrolling thresholds, the number of labels exceeds the threshold and starts scrolling horizontally | number | string |
4
|
| title-active-color | The title selects the state color | string | - |
| title-inactive-color | Title default state color | string | - |
| The name of the event | Description | Callback parameters |
|---|---|---|
| Click | Triggered when clicking on the tab | name: identifier, title: title |
| change | Triggered when the currently activated label changes | name: identifier, title: title |
| disabled | Triggered when clicking on a disabled label | name: identifier, title: title |
rendered
v2.3.0
|
Triggered when the label content is first rendered (triggered only after delayed rendering is turned on) | name: identifier, title: title |
| scroll | Triggered when scrolling, only in sticky mode | ScrollTop: Distance from top position, isFixed: Whether to ceiling . . . |
ref
you to get
Tabs
instance and call the instance method, as detailed
in The Component Instance Method
| The method name | Description | Parameters | Returns a value |
|---|---|---|---|
| resize | This method can be called to trigger a redraw after the size of the outer element has changed | - | void |
| Name | Description |
|---|---|
| nav-left | The content to the left of the title |
| nav-right | The content to the right of the title |
| Name | Description |
|---|---|
| default | The contents of the tab |
| title | Custom title, dynamic rendering is not supported |