vant/docs/examples-docs/tab.md

Tab 标签

使用指南

import { Tab, Tabs } from 'vant';

Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);

代码演示

基础用法

默认情况下是启用第一个tab。

:::demo 基础用法

<van-tabs>
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
</van-tabs>

:::

active特定tab

可以在van-tabs上设置active为对应tab的索引（从0开始，即0代表第一个）即可激活对应tab，默认为0。

:::demo 基础用法

<van-tabs :active="active">
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
</van-tabs>

:::

设置切换tab的动画时间

通过设置duration来指定时间，默认为0.3s，只接受Number类型参数。

:::demo 设置切换tab的动画时间

<van-tabs :duration="0.6">
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
</van-tabs>

:::

多于4个tab时

多于4个tab时，可以横向滚动tab。

:::demo 多于4个tab时

<van-tabs>
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
  <van-tab title="选项五">内容五</van-tab>
  <van-tab title="选项六">内容六</van-tab>
  <van-tab title="选项七">内容七</van-tab>
  <van-tab title="选项八">内容八</van-tab>
</van-tabs>

:::

禁用tab

在对应的van-tab上设置disabled属性即可，如果需要监听禁用事件，可以监听disabled事件。

:::demo 禁用tab

<van-tabs>
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
</van-tabs>

export default {
  methods: {
    popalert() {
      alert('haha')
    }
  }
};

:::

card样式

Tabs目前有两种样式：line和card，默认为line样式，也就上面基础用法中的样式，你可以在van-tabs上设置type为card改为card样式。

:::demo card样式

<van-tabs type="card">
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
</van-tabs>

:::

自定义样式

可以在van-tabs上设置对应的class，从而自定义某些样式。

:::demo 自定义样式

<van-tabs active="2" class="custom-tabwrap">
    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
</van-tabs>

<style>
  .custom-tabwrap .van-tab-active {
    color: #20a0ff;
  }
  .custom-tabwrap .van-tabs-nav-bar {
    background: #20a0ff;
  }
  .custom-pane {
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
</style>

:::

click事件

可以在van-tabs上绑定一个click事件，事件处理函数有一个参数，参数为对应tab在tabs中的索引。

:::demo click事件

<van-tabs @click="handleTabClick">
  <van-tab title="选项一">内容一</van-tab>
  <van-tab title="选项二">内容二</van-tab>
  <van-tab title="选项三">内容三</van-tab>
  <van-tab title="选项四">内容四</van-tab>
</van-tabs>

export default {
  methods: {
    handleTabClick(index) {
      alert(index);
    }
  }
};

:::

van-tabs API

参数	说明	类型	默认值	可选
classtype	两种UI	String	line	line, card
active	默认激活的tab	String, Number	0
navclass	tabs的内部nav上的自定义classname	String
duration	切换tab的动画时间	Number	0.3

van-tab API

参数	说明	类型	默认值	可选
title	tab的标题	String
disabled	是否禁用这个tab	Boolean	false

van-tabs Event

事件名	说明	参数
click	某个tab点击事件	index：点击的tab的索引
disabled	某个tab禁用时点击事件	index：点击的tab的索引