!79 pageHeader组件 特性更新

Merge pull request !79 from 0o张不歪o0/next

package/component/src/component/pageHeader/index.vue

@@ -4,7 +4,10 @@
       <i class="layui-icon layui-icon-return"></i>
       <div class="lay-page-header__title">{{ backText }}</div>
     </div>
-    <div class="lay-page-header__content">{{ content }}</div>
+    <div class="lay-page-header__content">
+      <slot v-if="slots.default"></slot>
+      <template v-else> {{ content }}</template>
+    </div>
   </div>
 </template>
 
@@ -14,7 +17,9 @@ export default {
 };
 </script>
 <script lang="ts" setup>
+import { useSlots } from "vue";
 import "./index.less";
+
 export interface LayPageHeaderProps {
   content?: string;
   backText?: string;
@@ -25,4 +30,6 @@ const props = withDefaults(defineProps<LayPageHeaderProps>(), {
 });
 
 const emits = defineEmits(["back"]);
+
+const slots = useSlots();
 </script>

package/document/src/document/zh-CN/components/pageHeader.md

@@ -38,6 +38,29 @@ const handleBack=()=>{
 
 :::
 
+::: title PageHeader 插槽
+:::
+::: demo 使用 默认插槽可以自定义右侧内容  同时content属性将失效
+
+<template>
+  <lay-page-header backText="back" @back="handleBack">
+    <span>Do what ever you want...</span>&nbsp;
+    <lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
+    <lay-icon type="layui-icon-face-smile" color="orange"></lay-icon> &nbsp;
+    <lay-icon type="layui-icon-face-smile" color="green"></lay-icon> &nbsp;
+    <lay-icon type="layui-icon-face-smile" color="cyan"></lay-icon> &nbsp;
+    <lay-icon type="layui-icon-face-smile" color="blue"></lay-icon> &nbsp;
+    <lay-icon type="layui-icon-face-smile" color="black"></lay-icon> &nbsp;
+  </lay-page-header>
+</template>
+
+<script setup>
+const handleBack=()=>{
+  alert('点击返回回调')
+}
+</script>
+
+:::
 
 ::: title PageHeader 属性
 :::
@@ -46,7 +69,7 @@ const handleBack=()=>{
 
 | 属性   | 描述 | 可选值         |
 | ------ | ---- | -------------- |
-| content| 标题 | --             |
+| content| 标题,当前默认插槽不为空时失效 | --             |
 | backText| 返回文本 | 默认 "返回"            |
 
 :::