上传组件增加预览功能

src/form/uploader.js

@@ -199,7 +199,6 @@ class Uploader extends Component {
         }
       }
     `,
-
     // drag
     css`
       :host([drag]) {
@@ -241,6 +240,29 @@ class Uploader extends Component {
           cursor: not-allowed;
         }
       }
+    `,
+    // preview
+    css`
+      .preview {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 99;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.3);
+
+        img {
+          display: block;
+          max-width: 90%;
+          max-height: 90%;
+          object-fit: contain;
+          box-shadow: 0 0 20px #000;
+        }
+      }
     `
   ]
 
@@ -334,6 +356,18 @@ class Uploader extends Component {
     this.#fetchUpload(files.map(it => it.file))
   }
 
+  #preview(ev, item) {
+    if (ev.target.name !== 'doc') {
+      this.$refs.view.firstElementChild.src =
+        item.url || URL.createObjectURL(item.file)
+      this.$refs.view.style.display = 'flex'
+    }
+  }
+
+  #closePreview(ev) {
+    this.$refs.view.style.display = ''
+  }
+
   mounted() {}
 
   render() {
@@ -387,8 +421,11 @@ class Uploader extends Component {
               >
                 <wc-icon
                   name=${it.stat === 0 ? 'loading' : grid ? 'search' : 'doc'}
+                  @click=${ev => this.#preview(ev, it)}
                 ></wc-icon>
-                <span class="name">${it.file.name}</span>
+                <span class="name" @click=${ev => this.#preview(ev, it)}
+                  >${it.file.name}</span
+                >
                 <wc-icon
                   class="del"
                   name="trash"
@@ -400,6 +437,9 @@ class Uploader extends Component {
           )}
         </footer>
       </main>
+      <div class="preview" ref="view" @click.self=${this.#closePreview}>
+        <img />
+      </div>
     `
   }
 }