feat(PageHeader): 新增 PageHeader 组件并应用于多个配置页面
新增了 PageHeader 通用组件,用于统一页面标题和操作按钮区域的布局。 该组件包含 title 属性以及 buttons 和 alerts 两个具名插槽,便于复用和维护。 已在以下页面中集成使用: - 图片管理页(ImageConfig.vue) - 音乐管理页(MusicConfig.vue) - 人员管理页(PersonAll/index.vue) - 中奖者管理页(PersonAlready.vue) - 奖品管理页(PrizeConfig.vue)
This commit is contained in:
24
src/components/PageHeader/index.vue
Normal file
24
src/components/PageHeader/index.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script setup lang='ts'>
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<h1 class="text-lg leading-10">
|
||||
{{ props.title }}
|
||||
</h1>
|
||||
<div class="button-group my-4">
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
<div class="divider mt-0" />
|
||||
<div>
|
||||
<slot name="alerts" />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user