完成标签头设置

This commit is contained in:
2025-07-28 13:07:27 +08:00
parent bc16414c69
commit e4d75038b9

View File

@@ -0,0 +1,35 @@
<template>
<UTabs :items="tabItems" :default-index="0" class="w-full">
<template v-for="(item, index) in tabItems" :key="index" #[item.slot] #content="{ index }" >
<div class="mt-4">
<slot :name="item.slot" />
</div>
</template>
</UTabs>
</template>
<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'
const slots = useSlots()
// Process slots to create tab items
const tabItems = computed(() => {
const defaultSlots = slots.default?.() || []
return defaultSlots
.filter(slot => slot.type === 'div' && slot.props)
.map((slot, index) => {
const label = slot.props?.label || `Tab ${index + 1}`
const icon = slot.props?.icon
const slotName = `tab-${index}` as const
return {
label,
icon,
slot: slotName
} satisfies TabsItem
})
})
</script>