完成标签头设置
This commit is contained in:
35
app/components/content/ETabs.vue
Normal file
35
app/components/content/ETabs.vue
Normal 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>
|
||||||
|
|
Reference in New Issue
Block a user