fix: 修复 toast css max-content 不兼容问题

hellof2e · Dec 27, 2023 · 251d365 · 251d365
1 parent b96a90b
commit 251d365
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/packages/quarkd/src/toast/index.tsx b/packages/quarkd/src/toast/index.tsx
@@ -44,12 +44,16 @@ class QuarkToast extends QuarkElement {
 
   loadingIconDirection: "horizontal" | "vertical" = "vertical";
 
+  toastWidth = "auto";
+
   iconRef: any = createRef();
 
   toastRef: any = createRef();
 
   loadingtRef: any = createRef();
 
+  textRef: any = createRef();
+
   static allowMultiple = false;
 
   componentDidMount(): void {
@@ -85,7 +89,10 @@ class QuarkToast extends QuarkElement {
     if (propName === "show") {
       const { current: loadingtCurrent } = this.loadingtRef;
       if (this.toastRef && this.toastRef.current) {
+        const rect = this.textRef.current.getBoundingClientRect();
         const { current } = this.toastRef;
+        const toastWidth = rect.width + 40;
+        this.toastWidth = toastWidth;
         // 设置退出过渡动画
         if (newValue) {
           // 由关闭到打开
@@ -148,6 +155,9 @@ class QuarkToast extends QuarkElement {
             type="circular"
             vertical
           ></quark-loading>
+          <span class="hide-content" ref={this.textRef}>
+            {this.content}
+          </span>
           <slot>{this.content}</slot>
         </div>
       </quark-overlay>
@@ -157,9 +167,22 @@ class QuarkToast extends QuarkElement {
     if (this.zIndex) {
       this.style.zIndex = `${this.zIndex}`;
     }
+    const visibility = this.toastWidth !== "auto" ? "visible" : "hidden";
     return (
-      <div class="quark-toast" ref={this.toastRef}>
+      <div
+        class="quark-toast"
+        ref={this.toastRef}
+        style={{
+          width: this.toastWidth,
+          visibility,
+          minWidth: `var(--toast-min-width, 120px)`,
+          maxWidth: `var(--toast-max-width, 240px)`,
+        }}
+      >
         {this.type !== "text" && this.renderIcon()}
+        <span class="hide-content" ref={this.textRef}>
+          {this.content}
+        </span>
         <slot>{this.content}</slot>
       </div>
     );

diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
@@ -51,10 +51,11 @@
 
 :host([type="text"]) .quark-toast {
   padding: var(--toast-text-padding, 16px 20px);
-  width: max-content;
+  width: auto;
   height: auto;
   min-width: var(--toast-min-width, 120px);
   max-width: var(--toast-max-width, 240px);
+  white-space: normal;
 }
 
 quark-icon-whitesuccess-o,
@@ -96,4 +97,11 @@ quark-icon-whitewarning-o {
 :host .quark-loading-leave {
   opacity: 0;
   transition: opacity var(--toast-transition-fade-out, 0.4s) ease-out;
+}
+:host .hide-content{
+  width: auto;
+  white-space: nowrap;
+  display: inline-block; /* 使元素根据内容调整宽度 */
+  position: absolute;
+  left: 500px;
 }