fix(breadcrumb): async get width

src/breadcrumb/_example/base.tsx

@@ -1,11 +1,15 @@
 import 'tdesign-web-components/breadcrumb';
 
-export default function Breadcrumb() {
-  return (
-    <t-breadcrumb max-item-width={'150'}>
-      <t-breadcrumb-item> 页面1 </t-breadcrumb-item>
-      <t-breadcrumb-item>页面2面包屑文案超长时悬浮显示文案全部信息</t-breadcrumb-item>
-      <t-breadcrumb-item max-width={'160'}> 面包屑中文案过长时可缩略显示，鼠标hover时显示全部 </t-breadcrumb-item>
-    </t-breadcrumb>
-  );
+import { Component } from 'omi';
+
+export default class Breadcrumb extends Component {
+  render() {
+    return (
+      <t-breadcrumb max-item-width={'150'}>
+        <t-breadcrumb-item>页面一</t-breadcrumb-item>
+        <t-breadcrumb-item>页面2面包屑文案超长时悬浮显示文案全部信息</t-breadcrumb-item>
+        <t-breadcrumb-item max-width={'160'}> 面包屑中文案过长时可缩略显示，鼠标hover时显示全部 </t-breadcrumb-item>
+      </t-breadcrumb>
+    );
+  }
 }

src/breadcrumb/breadcrumb-item.tsx

@@ -1,7 +1,7 @@
 import 'tdesign-icons-web-components/esm/components/chevron-right';
 import '../tooltip';
 
-import { bind, Component, createRef, OmiDOMAttributes, tag } from 'omi';
+import { bind, Component, OmiDOMAttributes, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
 import { isNodeOverflow } from '../_util/dom';
@@ -24,6 +24,8 @@ const localTBreadcrumbOrigin: LocalTBreadcrumb = {
 export default class BreadcrumbItem extends Component<BreadcrumbItemProps> {
   static css = [];
 
+  static isLightDOM = true;
+
   className = `${getClassPrefix()}-breadcrumb__item`;
 
   static defaultProps = {
@@ -47,24 +49,29 @@ export default class BreadcrumbItem extends Component<BreadcrumbItemProps> {
 
   isCutOff = false;
 
-  breadcrumbText = createRef<HTMLElement>();
-
   install() {
     this.injection.tBreadcrumb && (this.localTBreadcrumb = this.injection.tBreadcrumb);
   }
 
   adjustCutOff() {
-    // TODO light dom 中，在除了 installed 的其他生命周期中，ref.current.clientWidth 等属性为 0，无法在更新时判断是否溢出
-    if (this.breadcrumbText.current) {
-      this.isCutOff = isNodeOverflow(this.breadcrumbText.current);
-    }
+    setTimeout(() => {
+      const breadcrumbText = this.querySelector(`.${getClassPrefix()}-breadcrumb__inner-text`);
+
+      if (breadcrumbText?.clientWidth) {
+        const isCutOff = isNodeOverflow(breadcrumbText);
+        if (this.isCutOff !== isCutOff) {
+          this.isCutOff = isCutOff;
+          this.update();
+        }
+      }
+    });
   }
 
-  installed(): void {
+  ready(): void {
     this.adjustCutOff();
   }
 
-  beforeUpdate(): void {
+  updated(): void {
     this.adjustCutOff();
   }
 
@@ -90,20 +97,20 @@ export default class BreadcrumbItem extends Component<BreadcrumbItemProps> {
 
     const textContent = (
       <span class={`${classPrefix}-breadcrumb__inner`} style={maxWithStyle}>
-        <span ref={this.breadcrumbText} class={`${classPrefix}-breadcrumb__inner-text`}>
-          {children || content}
-        </span>
+        <span class={`${classPrefix}-breadcrumb__inner-text`}>{children || content}</span>
       </span>
     );
 
-    let itemContent = <span class={classname(textClass)}>{textContent}</span>;
+    let itemContent;
     if (href && !disabled) {
       textClass.push(`${classPrefix}-link`);
       itemContent = (
         <a class={classname(textClass)} href={href} target={target}>
           {textContent}
         </a>
       );
+    } else {
+      itemContent = <span class={classname(textClass)}>{textContent}</span>;
     }
 
     return (

src/breadcrumb/breadcrumb.tsx

@@ -4,7 +4,6 @@ import { Component, OmiDOMAttributes, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
 import { getChildrenArray } from '../_util/component';
-import { convertToLightDomNode } from '../_util/lightDom';
 import { TdBreadcrumbProps } from './type';
 
 interface BreadcrumbProps extends TdBreadcrumbProps, OmiDOMAttributes {}
@@ -23,11 +22,11 @@ export default class Breadcrumb extends Component<BreadcrumbProps> {
     const { children, options } = this.props;
     const childrenArray = getChildrenArray(children);
     let content = childrenArray
-      .filter((child) => child.attributes?.slot !== 'separator')
-      .map((item) => convertToLightDomNode(item));
+      .filter((child) => child.attributes?.slot !== 'separator' && child.nodeName === 't-breadcrumb-item')
+      .map((item) => item);
 
     if (options && options.length) {
-      content = options.map((option) => convertToLightDomNode(<t-breadcrumb-item {...option}></t-breadcrumb-item>));
+      content = options.map((option) => <t-breadcrumb-item {...option}></t-breadcrumb-item>);
     }
     return content;
   }