添加ETabs

This commit is contained in:
2025-07-28 13:21:18 +08:00
parent e4d75038b9
commit 35d7e8aa8b

View File

@@ -1,8 +1,8 @@
<template> <template>
<UTabs :items="tabItems" :default-index="0" class="w-full"> <UTabs :items="tabItems" class="w-full" :unmount-on-hide="false">
<template v-for="(item, index) in tabItems" :key="index" #[item.slot] #content="{ index }" > <template v-for="item in tabItems" #[item.slot]="{ item: slotItem }">
<div class="mt-4"> <div class="mt-4">
<slot :name="item.slot" /> <component :is="getSlotContent(slotItem)" />
</div> </div>
</template> </template>
</UTabs> </UTabs>
@@ -13,16 +13,18 @@ import type { TabsItem } from '@nuxt/ui'
const slots = useSlots() const slots = useSlots()
// Process slots to create tab items const slotContents = ref<Record<string, any>>({})
const tabItems = computed(() => { const tabItems = computed(() => {
const defaultSlots = slots.default?.() || [] const defaultSlots = slots.default?.() || []
return defaultSlots return defaultSlots
.filter(slot => slot.type === 'div' && slot.props) .filter(slot => slot.type === 'div' && slot.props)
.map((slot, index) => { .map((slot, index) => {
const label = slot.props?.label || `Tab ${index + 1}` const label = slot.props?.label || `Tab ${index + 1}`
const icon = slot.props?.icon const icon = slot.props?.icon
const slotName = `tab-${index}` as const const slotName = `tab-${index}`
slotContents.value[slotName] = slot
return { return {
label, label,
@@ -31,5 +33,9 @@ const tabItems = computed(() => {
} satisfies TabsItem } satisfies TabsItem
}) })
}) })
</script>
function getSlotContent(item: TabsItem) {
if (!item.slot) return null
return slotContents.value[item.slot]
}
</script>