mirror of
https://gitee.com/mirrors/AllinSSL.git
synced 2026-03-10 08:41:09 +08:00
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { defineComponent, type Slots } from 'vue'
|
|
/**
|
|
* @description 基础组件
|
|
* @example
|
|
* ```tsx
|
|
* <BaseComponent>
|
|
* <template #header-left>左侧头部内容</template>
|
|
* <template #header-right>右侧头部内容</template>
|
|
* <template #header>完整头部内容</template>
|
|
* <template #content>主要内容</template>
|
|
* <template #footer-left>左侧底部内容</template>
|
|
* <template #footer-right>右侧底部内容</template>
|
|
* <template #footer>完整底部内容</template>
|
|
* <template #popup>弹窗内容</template>
|
|
* </BaseComponent>
|
|
* ```
|
|
*/
|
|
export default defineComponent({
|
|
name: 'BaseComponent',
|
|
setup(_, { slots }: { slots: Slots }) {
|
|
// 获取插槽内容，支持驼峰和短横线两种命名方式
|
|
const slotHL = slots['header-left'] || slots.headerLeft
|
|
const slotHR = slots['header-right'] || slots.headerRight
|
|
const slotHeader = slots.header // 新增对 #header 插槽的支持
|
|
const slotFL = slots['footer-left'] || slots.footerLeft
|
|
const slotFR = slots['footer-right'] || slots.footerRight
|
|
const slotFooter = slots.footer // 新增对 #footer 插槽的支持
|
|
|
|
return () => (
|
|
<div class="flex flex-col">
|
|
{/* 头部区域: 优先使用 #header 插槽，如果不存在则尝试 #header-left 和 #header-right */}
|
|
{slotHeader ? (
|
|
<div class="flex justify-between flex-wrap w-full">{slotHeader()}</div>
|
|
) : (
|
|
(slotHL || slotHR) && (
|
|
<div class="flex justify-between flex-wrap" style={{ rowGap: '0.8rem' }}>
|
|
<div class="flex flex-shrink-0">{slotHL && slotHL()}</div>
|
|
<div class="flex flex-shrink-0">{slotHR && slotHR()}</div>
|
|
</div>
|
|
)
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div
|
|
class={`w-full content ${
|
|
slotHeader || slotHL || slotHR ? 'mt-[1.2rem]' : ''
|
|
} ${slotFooter || slotFL || slotFR ? 'mb-[1.2rem]' : ''}`}
|
|
>
|
|
{slots.content && slots.content()}
|
|
</div>
|
|
|
|
{/* 底部区域: 优先使用 #footer 插槽，如果不存在则尝试 #footer-left 和 #footer-right */}
|
|
{slotFooter ? (
|
|
<div class="flex justify-between w-full">{slotFooter()}</div>
|
|
) : (
|
|
(slotFL || slotFR) && (
|
|
<div class="flex justify-between">
|
|
<div class="flex flex-shrink-0">{slotFL && slotFL()}</div>
|
|
<div class="flex flex-shrink-0">{slotFR && slotFR()}</div>
|
|
</div>
|
|
)
|
|
)}
|
|
|
|
{/* 弹窗区域 */}
|
|
{slots.popup && slots.popup()}
|
|
</div>
|
|
)
|
|
},
|
|
})
|