PageMain 组件增加 title slot 设置

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>

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;">