fix: 修复 toast 消失未移除 dom 问题

hellof2e · Jan 12, 2024 · fd1e05e · fd1e05e
1 parent 2117e5c
commit fd1e05e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/quarkd/src/toast/index.tsx b/packages/quarkd/src/toast/index.tsx
@@ -65,7 +65,7 @@ class QuarkToast extends QuarkElement {
         if (!el.classList.contains("quark-toast-leave")) return;
         if (el && el.parentNode && !this.show) {
           try {
-            // document.body.removeChild(this);
+            document.body.removeChild(this);
           } catch (error) {
             // todo something
           }
@@ -146,8 +146,8 @@ class QuarkToast extends QuarkElement {
         <div
           class={`quark-toast quark-toast--${this.loadingIconDirection}`}
           ref={this.toastRef}
+          style={{ minHeight: `var(--toast-height, 120px)` }}
         >
-          {this.type !== "text" && this.renderIcon()}
           <quark-loading
             ref={this.loadingtRef}
             size={this.iconSize}
@@ -179,6 +179,10 @@ class QuarkToast extends QuarkElement {
           maxWidth: `var(--toast-max-width, 240px)`,
           padding: `var(--toast-text-padding, 16px 20px)`,
           fontSize: `var(--toast-font-size, 14px)`,
+          minHeight:
+            this.type !== "text" && this.loadingIconDirection !== "horizontal"
+              ? `var(--toast-height, 120px)`
+              : "auto",
         }}
       >
         {this.type !== "text" && this.renderIcon()}

diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
@@ -22,7 +22,6 @@
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   pointer-events: all;
   width: var(--toast-width, 120px);
-  min-height: var(--toast-height, 120px);
   text-align: center;
   transition: opacity var(--toast-transition-fade-in, 0.3s) ease-in;
   position: fixed;
@@ -43,6 +42,7 @@
   height: auto;
   min-width: var(--toast-min-width, 120px);
   max-width: var(--toast-max-width, 240px);
+  min-height: auto !important;
 }
 
 :host([show]) .quark-toast {
@@ -51,7 +51,7 @@
 
 :host([type="text"]) .quark-toast {
   padding: var(--toast-text-padding, 16px 20px);
-  width: auto;
+  width: max-content;
   height: auto;
   min-width: var(--toast-min-width, 120px);
   max-width: var(--toast-max-width, 240px);