feat: uploader 样式优化以及上传同事位置调整

hellof2e · Jun 21, 2023 · 3206e5e · 3206e5e
1 parent b502aef
commit 3206e5e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/packages/quarkd/src/uploader/demo.scss b/packages/quarkd/src/uploader/demo.scss
@@ -3,6 +3,9 @@
   quark-button {
     margin-left: 10px;
   }
+  quark-uploader {
+    --uploader-border-width: 0px;
+  }
   .closeimg{
     --uploader-delete-top: 0px;
     --uploader-delete-right: 0px;

diff --git a/packages/quarkd/src/uploader/index.tsx b/packages/quarkd/src/uploader/index.tsx
@@ -284,31 +284,13 @@ class QuarkUploader extends QuarkElement {
     const { capture, accept, multiple, name, id, disabled } = this;
     const hiddenUpload = this.tasks.length >= Number(this.maxcount);
     const showTasks = this.preview ? this.tasks.slice(0, this.maxcount) : [];
+    const uploaderClasses = [
+      "quark-uploader",
+      disabled && "uploader-disabled",
+      this.preview && showTasks.length && "quark-uploader-mg",
+    ];
     return (
       <Fragment>
-        {!this.readonly && (
-          <div
-            class={`quark-uploader ${disabled && "uploader-disabled"}`}
-            style={{ display: !hiddenUpload ? "block" : "none" }}
-          >
-            <slot name="uploader">
-              <div class="quark-uploader-icon">
-                <quark-icon-camera-fill size="32" color={this.iconcolor} />
-              </div>
-            </slot>
-            <input
-              ref={this.inputRef}
-              name={name}
-              id={id}
-              type="file"
-              accept={accept}
-              multiple={multiple}
-              capture={capture}
-              onchange={this.onChange}
-              disabled={disabled}
-            />
-          </div>
-        )}
         {showTasks.map((item, index, n) => (
           <div class="quark-uploader-preview-item" key={item.id}>
             {item.status === "uploading" && (
@@ -337,6 +319,29 @@ class QuarkUploader extends QuarkElement {
             )}
           </div>
         ))}
+        {!this.readonly && (
+          <div
+            class={uploaderClasses.join(" ")}
+            style={{ display: !hiddenUpload ? "block" : "none" }}
+          >
+            <slot name="uploader">
+              <div class="quark-uploader-icon">
+                <quark-icon-camera-fill size="32" color={this.iconcolor} />
+              </div>
+            </slot>
+            <input
+              ref={this.inputRef}
+              name={name}
+              id={id}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              capture={capture}
+              onchange={this.onChange}
+              disabled={disabled}
+            />
+          </div>
+        )}
       </Fragment>
     );
   }

diff --git a/packages/quarkd/src/uploader/style.css b/packages/quarkd/src/uploader/style.css
@@ -11,14 +11,15 @@
   justify-content: center;
   flex-direction: column;
   cursor: pointer;
-  margin: 0 var(--uploader-margin, 6px) var(--uploader-margin, 6px) 0;
 }
-
+:host .quark-uploader-mg {
+  /* margin-right: var(--uploader-margin, 6px); */
+}
 :host .quark-uploader-icon {
   box-sizing: border-box;
   width: var(--uploader-width, 93px);
   height: var(--uploader-height, 93px);
-  background: var(--uploader-background);
+  background: var(--uploader-background, #f7f8fa);
   border-width: var(--uploader-border-width, 1px);
   border-color: var(--uploader-border-color, #e1e6eb);
   border-style: var(--uploader-border-style, dashed);