✨(component): [tabitem] title 支持渲染函数

package/component/src/component/tab/index.vue

@@ -8,7 +8,6 @@ export default {
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
 import tabItem from "../tabItem/index.vue";
-import RenderTitle from "./renderTitle.vue";
 import RenderFunction from "../_components/renderFunction";
 import {
   Component,
@@ -26,6 +25,7 @@ import {
   reactive,
   h,
   createTextVNode,
+isVNode,
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { TabData, TabInjectKey } from "./interface";
@@ -268,9 +268,18 @@ const update = () => {
 };
 
 const renderTabChild = (child: TabData) => {
-  return child.slots?.title
-    ? () => h("span", child.slots?.title && child.slots.title())
-    : () => createTextVNode(child.title);
+
+  if (child.slots?.title){
+    return () => h("span", child.slots?.title && child.slots.title())
+  }
+
+  if (typeof child.title === "function"){
+    // @ts-ignore
+    return () => child.title();
+    
+  } else if (typeof child.title === "string"){
+    return () => createTextVNode(child.title as string);
+  }
 };
 
 useResizeObserver(navRef, update);

package/component/src/component/tab/interface.ts

@@ -4,7 +4,7 @@ export const TabInjectKey = Symbol("layuiTab");
 
 export interface TabData {
   id: string;
-  title?: string;
+  title?: string | Function;
   closable?: string | boolean;
   slots: Slots;
 }

package/component/src/component/tabItem/index.vue

@@ -20,7 +20,7 @@ import { TabInjectKey, TabsContext } from "../tab/interface";
 
 export interface LayTabItemProps {
   id: string;
-  title: string;
+  title?: string | Function;
   closable?: boolean | string;
 }
 

package/document-component/src/document/zh-CN/components/tab.md

@@ -43,40 +43,56 @@ export default {
 
 <template>
   <lay-tab v-model="current11" :allow-close="true">
-    <lay-tab-item title="选项一" id="1">
+    <lay-tab-item id="1">
       <template #title>
         <lay-icon type="layui-icon-console"></lay-icon>
         <span style="margin-left:10px">选项一</span>
       </template>
       <div style="padding:20px">选项一</div>
     </lay-tab-item>
-    <lay-tab-item title="选项一" id="2">
+    <lay-tab-item id="2">
       <template #title>
         <lay-icon type="layui-icon-user"></lay-icon>
-        <span style="margin-left:10px">选项一</span>
+        <span style="margin-left:10px">选项二</span>
       </template>
       <div style="padding:20px">选项二</div>
     </lay-tab-item>
-    <lay-tab-item title="选项一" id="3">
+    <lay-tab-item id="3">
       <template #title>
         <lay-icon type="layui-icon-set"></lay-icon>
-        <span style="margin-left:10px">选项一</span>
+        <span style="margin-left:10px">选项三</span>
       </template>
       <div style="padding:20px">选项三</div>
     </lay-tab-item>
+    <lay-tab-item id="4" :title="renderTitleFunc">
+      <div style="padding:20px">选项四</div>
+    </lay-tab-item>
   </lay-tab>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref,h , resolveComponent} from 'vue'
 
 export default {
   setup() {
+    const LayIcon = resolveComponent("LayIcon");
 
     const current11 = ref("1")
+    const renderTitleFunc = () => [
+      h(LayIcon, 
+      {
+        type: "layui-icon-component",
+      }),
+      h("span", 
+      {
+        style: "margin-left: 10px; color: red",
+      },
+      "选项四")
+    ]
 
     return {
-      current11
+      current11,
+      renderTitleFunc
     }
   }
 }