From f730295b353bcf56817351fcdd507d4dcd61f49c Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Sun, 19 Jun 2022 20:55:32 +0800
Subject: [PATCH] =?UTF-8?q?PageMain=20=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=20title=20slot=20=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageMain/index.vue                    | 8 ++++++--
 src/views/component_extend_example/pagemain.demo.vue | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index 9f2cc921..84a24091 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -14,8 +14,9 @@ const props = defineProps({
     }
 })
 
-const collaspeData = ref(props.collaspe)
+const titleSlot = !!useSlots().title
 
+const collaspeData = ref(props.collaspe)
 function unCollaspe() {
     collaspeData.value = false
 }
@@ -30,7 +31,10 @@ function unCollaspe() {
             'height': collaspeData ? height : ''
         }"
     >
-        <div v-if="title" class="title-container">{{ title }}</div>
+        <div v-if="titleSlot || title" class="title-container">
+            <slot v-if="titleSlot" name="title" />
+            <template v-else>{{ title }}</template>
+        </div>
         <slot />
         <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
             <el-icon>
diff --git a/src/views/component_extend_example/pagemain.demo.vue b/src/views/component_extend_example/pagemain.demo.vue
index 1edab1a7..80bc72e4 100644
--- a/src/views/component_extend_example/pagemain.demo.vue
+++ b/src/views/component_extend_example/pagemain.demo.vue
@@ -15,6 +15,15 @@
         <page-main title="你可以设置一个自定义的标题">
             这里放页面内容
         </page-main>
+        <page-main>
+            <template #title>
+                <div style="display: flex; align-item: center; justify-content: space-between;">
+                    通过 slot 设置标题
+                    <el-button size="small">还可以放置自定义按钮</el-button>
+                </div>
+            </template>
+            这里放页面内容
+        </page-main>
         <el-row :gutter="20" style="margin: -10px 10px;">
             <el-col :md="8">
                 <page-main style="margin: 10px 0;">