34 lines
968 B
Vue
34 lines
968 B
Vue
<script setup lang="ts">
|
||
// navOnly：只渲染标签栏，内容区由外部控制（适合配合路由或分栏布局）
|
||
// #label 自定义标签、#leftExtra / #rightExtra 在标签栏两端加内容
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Tabs } from '@g3soft/ui'
|
||
|
||
const active = ref('a')
|
||
|
||
const items = [
|
||
{ key: 'a', label: '标签 A' },
|
||
{ key: 'b', label: '标签 B' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<G3Tabs v-model="active" :items="items" nav-only>
|
||
<template #leftExtra>
|
||
<span style="font-size: 13px; color: #6b7280">项目：</span>
|
||
</template>
|
||
|
||
<template #label="{ item }">
|
||
<span>{{ item === 'a' ? '标签 A（自定义）' : '标签 B' }}</span>
|
||
</template>
|
||
|
||
<template #rightExtra>
|
||
<G3Button size="small" type="ghost">+ 新建</G3Button>
|
||
</template>
|
||
</G3Tabs>
|
||
|
||
<div style="padding: 16px 0; color: #6b7280; font-size: 13px">
|
||
当前激活：{{ active }}（内容由外部渲染）
|
||
</div>
|
||
</template>
|