Tab

`CuiTab` 负责在同一页面内切换多段内容或状态区域，适合资料、日志和附件等并列信息组织。

CuiTab

CuiTab 负责在同一页面内切换多段内容或状态区域，适合资料、日志和附件等并列信息组织。

演示多标签内容切换和当前状态保持

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import TabBasicDemo from "~/app/components/demo/TabBasicDemo.vue";
</script>

<template>
    <TabBasicDemo />
</template>

标签页常用配置

属性	类型	默认值	说明
`tabs`	`CuiTabItem[]`	—	Tab 列表（必填）
`activeTab`	`string`	—	当前活跃 Tab 名，支持 v-model:activeTab（必填）
`type`	`'card' \| 'border-card'`	`'card'`	Tab 样式
`closable`	`boolean`	`false`	是否允许关闭 Tab
`addable`	`boolean`	`false`	是否允许新增 Tab
`editableType`	`'add' \| 'remove' \| 'both'`	`'add'`	可编辑模式

插槽名	Scope	说明
`tab-{name}`（动态名）	`{ tab: CuiTabItem }`	各 Tab 面板内容，优先于 tab.content 文本