Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合，支持卡片、边框卡片等多种风格。

基础用法

通过 v-model 绑定当前激活标签，使用 ZcTabPane 定义标签页。

用户管理内容

配置管理内容

角色管理内容

定时任务补偿

<template>
  <ZcTabs v-model="activeTab">
    <ZcTabPane label="用户管理" name="first">用户管理内容</ZcTabPane>
    <ZcTabPane label="配置管理" name="second">配置管理内容</ZcTabPane>
    <ZcTabPane label="角色管理" name="third">角色管理内容</ZcTabPane>
    <ZcTabPane label="定时任务" name="fourth">定时任务补偿</ZcTabPane>
  </ZcTabs>
</template>

<script setup>
import { ref } from 'vue'
const activeTab = ref('first')
</script>

卡片风格

使用 type="card" 设置卡片风格标签页。

最新内容

热门内容

推荐内容

<template>
  <ZcTabs v-model="activeTab" type="card">
    <ZcTabPane label="最新" name="latest">最新内容</ZcTabPane>
    <ZcTabPane label="热门" name="popular">热门内容</ZcTabPane>
    <ZcTabPane label="推荐" name="recommend">推荐内容</ZcTabPane>
  </ZcTabs>
</template>

<script setup>
import { ref } from 'vue'
const activeTab = ref('latest')
</script>

位置选项卡

通过 position 属性设置标签页的位置：top、right、bottom、left。

左侧选项卡内容一

左侧选项卡内容二

左侧选项卡内容三

<template>
  <ZcTabs v-model="activeTab" position="left" style="height: 200px;">
    <ZcTabPane label="选项一" name="1">左侧选项卡内容一</ZcTabPane>
    <ZcTabPane label="选项二" name="2">左侧选项卡内容二</ZcTabPane>
    <ZcTabPane label="选项三" name="3">左侧选项卡内容三</ZcTabPane>
  </ZcTabs>
</template>

<script setup>
import { ref } from 'vue'
const activeTab = ref('1')
</script>

Tabs API

Props

参数	说明	类型	默认值
modelValue (v-model)	当前激活标签	string | number	''
type	风格类型	'' | 'card' | 'border-card'	''
position	标签位置	'top' | 'right' | 'bottom' | 'left'	'top'
closable	标签是否可关闭	boolean	false
addable	标签是否可新增	boolean	false
editable	标签是否可编辑（新增+关闭）	boolean	false
beforeLeave	切换前钩子	(active, oldActive) => boolean | Promise<boolean>	—

Events

事件名	说明	回调参数
update:modelValue	激活标签变化	(name: string | number)
tab-click	点击标签	(name, event: MouseEvent)
tab-remove	关闭标签	(name: string | number)
tab-add	新增标签	—
edit	编辑操作	(name, action: "remove" | "add")

TabPane Props

参数	说明	类型	默认值
name	标签标识	string | number	''
label	标签标题	string	''
lazy	是否懒加载	boolean	false
closable	是否可关闭	boolean	false
disabled	是否禁用	boolean	false