---
url: /components/tabs.md
---
# Tabs 标签页

以标签方式组织同层级内容区块：tab-pane 注册式声明，标题栏自动生成跟随激活项的指示条，支持 card / border-card 风格、四向标签位置、动态增删与懒渲染，v-model 双向绑定当前激活项。容器宽度不足时（移动端、窄侧栏）页签自动进入横向滚动，激活项始终滚入可视区，见 [移动端 · 页面导航](/mobile/navigation)。

## 基础用法

未传 v-model 时默认激活第一个 pane；`name` 缺省时以 `label` 作为标识；pane 设 `disabled` 后标签不可点击。

## v-model 绑定与程序切换

v-model 绑定当前激活 pane 的 name，点击与外部改写双向同步，外部赋值即可程序化切换标签。

## 卡片风格

type 为 'card' 时标签呈卡片拼接，'border-card' 时整体渲染为带边框底色的卡片。

## 标签位置

`tab-position` 支持 top / right / bottom / left，指示条方向自适应。

## 动态增删标签

pane 设 `closable` 显示关闭图标，点击触发 `tab-remove`（参数为 pane 对象，含 paneName）并从组件内注销，需在回调中同步移除数据源；配合按钮追加数据实现新增。根组件设 `editable` 后不渲染关闭图标，用于纯新增场景。

## 懒渲染

`lazy`（根级或单 pane 级）开启后，内容延迟到首次激活才渲染，适合图表等开销大的面板；渲染过即保持挂载，切回不重复初始化。

## API