vant/docs/examples-docs/tab.md

Tab 标签

使用指南

如果你已经按照快速上手中引入了整个vant，以下组件注册就可以忽略了，因为你已经全局注册了vant中的全部组件。

全局注册

你可以在全局注册Tab组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Tab组件了：

import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import 'vant/lib/vant-css/tab.css';

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

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Tab组件，这样只能在你注册的组件中使用Tab：

import { Tab, Tabs } from 'vant';
import 'vant/lib/vant-css/tab.css';

export default {
  components: {
    'van-tab': Tab,
    'van-tabs': 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-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-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>

:::

禁用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-tab title="选项五">内容五</van-tab>
</van-tabs>

<script>
export default {
  methods: {
    popalert() {
      alert('haha')
    }
  }
};
</script>

:::

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-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-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-tab title="选项五">内容五</van-tab>
</van-tabs>

<script>
export default {
  methods: {
    handleTabClick(index) {
      alert(index);
    }
  }
};
</script>

:::

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的索引