fix(BreadcrumbItem): 修复没有读取content内容的问题; 修复通过props指定default内容并且时文本溢出时…

…toolip调用slot?.default()非函数的问题

src/breadcrumb/_example/base.vue

@@ -1,7 +1,7 @@
 <template>
   <t-breadcrumb :max-item-width="'150'">
-    <t-breadcrumbItem to="/vue-next/components/menu"> 页面1 </t-breadcrumbItem>
-    <t-breadcrumbItem>页面2面包屑文案超长时悬浮显示文案全部信息</t-breadcrumbItem>
-    <t-breadcrumbItem :max-width="'160'"> 面包屑中文案过长时可缩略显示，鼠标hover时显示全部 </t-breadcrumbItem>
+    <t-breadcrumb-item to="/vue-next/components/menu"> 页面1 </t-breadcrumb-item>
+    <t-breadcrumb-item>页面2面包屑文案超长时悬浮显示文案全部信息</t-breadcrumb-item>
+    <t-breadcrumb-item :max-width="'160'"> 面包屑中文案过长时可缩略显示，鼠标hover时显示全部 </t-breadcrumb-item>
   </t-breadcrumb>
 </template>

src/breadcrumb/_example/custom.vue

@@ -1,9 +1,9 @@
 <template>
   <t-breadcrumb>
     <template #default>
-      <t-breadcrumbItem>页面1</t-breadcrumbItem>
-      <t-breadcrumbItem>页面2</t-breadcrumbItem>
-      <t-breadcrumbItem>页面3</t-breadcrumbItem>
+      <t-breadcrumb-item>页面1</t-breadcrumb-item>
+      <t-breadcrumb-item>页面2</t-breadcrumb-item>
+      <t-breadcrumb-item>页面3</t-breadcrumb-item>
     </template>
     <template #separator> > </template>
   </t-breadcrumb>

src/breadcrumb/_example/dropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <t-breadcrumb :separator="() => '/'">
-    <t-breadcrumbItem>页面1</t-breadcrumbItem>
-    <t-breadcrumbItem>页面2 <t-icon name="chevron-down" /></t-breadcrumbItem>
-    <t-breadcrumbItem>页面3</t-breadcrumbItem>
+    <t-breadcrumb-item>页面1</t-breadcrumb-item>
+    <t-breadcrumb-item>页面2 <t-icon name="chevron-down" /></t-breadcrumb-item>
+    <t-breadcrumb-item>页面3</t-breadcrumb-item>
   </t-breadcrumb>
 </template>

src/breadcrumb/_example/href.vue

@@ -1,13 +1,13 @@
 <template>
   <t-space direction="vertical">
     <t-breadcrumb>
-      <t-breadcrumbItem :to="{ path: '/' }">首页</t-breadcrumbItem>
-      <t-breadcrumbItem to="/vue/components/menu" :replace="true">页面1(覆盖路由)</t-breadcrumbItem>
-      <t-breadcrumbItem href="http://tdesign.tencent.com/" :target="'_blank'">页面2</t-breadcrumbItem>
-      <t-breadcrumbItem href="http://tdesign.tencent.com/vue/components/button" :disabled="true"
-        >页面3(disabled)</t-breadcrumbItem
+      <t-breadcrumb-item :to="{ path: '/' }">首页</t-breadcrumb-item>
+      <t-breadcrumb-item to="/vue/components/menu" :replace="true">页面1(覆盖路由)</t-breadcrumb-item>
+      <t-breadcrumb-item href="http://tdesign.tencent.com/" :target="'_blank'">页面2</t-breadcrumb-item>
+      <t-breadcrumb-item href="http://tdesign.tencent.com/vue/components/button" :disabled="true"
+        >页面3(disabled)</t-breadcrumb-item
       >
-      <t-breadcrumbItem @click="onClickItem">页面4自定义点击</t-breadcrumbItem>
+      <t-breadcrumb-item @click="onClickItem">页面4自定义点击</t-breadcrumb-item>
     </t-breadcrumb>
     <div style="margin-top: 20px">点击计数器：{{ count }}</div>
   </t-space>

src/breadcrumb/_example/to.vue

@@ -1,6 +1,6 @@
 <template>
   <t-breadcrumb>
-    <t-breadcrumbItem :to="{ path: '/' }"> 首页 </t-breadcrumbItem>
-    <t-breadcrumbItem>页面1</t-breadcrumbItem>
+    <t-breadcrumb-item :to="{ path: '/' }"> 首页 </t-breadcrumb-item>
+    <t-breadcrumb-item>页面1</t-breadcrumb-item>
   </t-breadcrumb>
 </template>

src/breadcrumb/breadcrumb-item.tsx

@@ -6,7 +6,7 @@ import Tooltip from '../tooltip/index';
 import { isNodeOverflow } from '../utils/dom';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
-import { useTNodeJSX } from '../hooks/tnode';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
 import isFunction from 'lodash/isFunction';
 
 interface LocalTBreadcrumb {
@@ -31,7 +31,10 @@ export default defineComponent({
   props: {
     ...props,
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { attrs }) {
+    const renderContent = useContent();
+    const renderTNodeJSX = useTNodeJSX();
+
     const breadcrumbText = ref<HTMLElement>();
     const localTBreadcrumb = inject('tBreadcrumb', localTBreadcrumbOrigin);
     const themeClassName = ref(localTBreadcrumb?.theme);
@@ -84,8 +87,6 @@ export default defineComponent({
     };
 
     return () => {
-      const renderTNodeJSX = useTNodeJSX();
-
       const itemClass = [COMPONENT_NAME.value, themeClassName.value];
       const textClass = [textFlowClass.value];
 
@@ -101,11 +102,14 @@ export default defineComponent({
           }
         },
       };
+
+      const content = renderContent('default', 'content');
+
       const textContent = (
         <span {...{ class: maxLengthClass.value, style: maxWithStyle.value }}>
           {renderTNodeJSX('icon')}
           <span ref={breadcrumbText} class={`${maxLengthClass.value}-text`}>
-            {renderTNodeJSX('default')}
+            {content}
           </span>
         </span>
       );
@@ -121,7 +125,7 @@ export default defineComponent({
       }
       return (
         <div class={itemClass} {...attrs} onClick={!props.disabled && props.onClick}>
-          {isCutOff.value ? <Tooltip content={() => slots?.default()}>{itemContent}</Tooltip> : itemContent}
+          {isCutOff.value ? <Tooltip content={() => content}>{itemContent}</Tooltip> : itemContent}
           <span class={separatorClass.value}>
             {isFunction(separatorContent) ? separatorContent() : separatorContent}
           </span>