## Tab 标签 ### 使用指南 如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。 #### 全局注册 你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了： ```js 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`： ```js import { Tab, Tabs } from 'vant'; import 'vant/lib/vant-css/tab.css'; export default { components: { 'van-tab': Tab, 'van-tabs': Tabs } }; ``` ### 代码演示 #### 基础用法 默认情况下是启用第一个`tab`。 :::demo 基础用法 ```html 内容一 内容二 内容三 内容四 ``` ::: #### active特定tab 可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。 :::demo 基础用法 ```html 内容一 内容二 内容三 内容四 ``` ::: ### 设置切换tab的动画时间 通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。 :::demo 设置切换tab的动画时间 ```html 内容一 内容二 内容三 ``` ::: #### 多于4个tab时 多于4个tab时，可以横向滚动tab。 :::demo 多于4个tab时 ```html 内容一 内容二 内容三 内容四 内容五 内容六 内容七 内容八 ``` ::: #### 禁用tab 在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 :::demo 禁用tab ```html 内容一 内容二 内容三 内容四 ``` ::: #### card样式 `Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。 :::demo card样式 ```html 内容一 内容二 内容三 内容四 ``` ::: #### 自定义样式 可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。 :::demo 自定义样式 ```html 内容一 内容二 内容三 内容四 ``` ::: #### click事件 可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。 :::demo click事件 ```html 内容一 内容二 内容三 内容四 ``` ::: ### 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`的索引 |