# Tabs 标签页
基础用法
显示代码
宽度自动填充
显示代码
自定义标题内容
显示代码
头部插槽
显示代码
标签过多
显示代码
Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值，激活的选项卡name值 | String Number | - | 第一个选项卡的 name |
| tab-min-width | 选项卡最小宽度 | String | - | - |
| tab-height | 选项卡的高度 | String | - | 60px |
| stretch | 选项卡是否自动撑开 | Boolean | - | false |
| text-color | 选项卡文字颜色 | String | - | #546E7A |
| active-text-color | 激活状态下的文字颜色 | String | - | #2196f3 |
| bottom-line-width | 选项卡激活状态下底部线条宽度 | String | - | 100% |
| bottom-line-color | 选项卡激活状态下底部线条颜色 | String | - | - |
| before-leave | 切换前的钩子，返回 false 或不返回则阻止切换 | Function(activeName, oldActiveName) | - | - |
| header-border | 标签头部的下边框 | String | - | - |
| header-space | 标签头部的间隔 | String | - | 32px |
| header-background | 标签头部背景 | String | - | #ffffff |
Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| tabClick | tab 被点击时触发 | name: 被选中的选项卡name值 |
Tab Slots
| 名称 | 说明 |
|---|---|
| header | 头部右侧插槽 |
Tab Panel Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | String | - | - |
| label | 选项卡标题 | String | - | - |