From 3607cc351355176edca40b4e7d50e2c22466e51b Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 19 Apr 2023 17:37:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/image/index.js   |  8 +++++++-
 src/image/preview.js | 22 ++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/image/index.js b/src/image/index.js
index 9e51555..97db2ed 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -7,6 +7,7 @@
 import { css, html, Component, styleMap } from '@bd/core'
 import '../icon/index.js'
 import './preview.js'
+
 class Image extends Component {
   static props = {
     src: '',
@@ -23,7 +24,7 @@ class Image extends Component {
       attribute: false
     }
   }
-  status = 'loading'
+
   static styles = css`
     :host {
       position: relative;
@@ -47,6 +48,9 @@ class Image extends Component {
       align-items: center;
     }
   `
+
+  status = 'loading'
+
   onError() {
     this.status = 'error'
     this.$refs.wrapper.removeChild(this.$refs.img)
@@ -76,6 +80,7 @@ class Image extends Component {
       cursor: previewSrcList.length ? 'pointer' : 'default'
     })
     let $slot = ''
+
     if (status === 'loading') {
       $slot = html`<slot name="placeholder"></slot>`
     } else if (status === 'error') {
@@ -83,6 +88,7 @@ class Image extends Component {
         <div class="error">FAILED</div>
       </slot>`
     }
+
     return html`
       <div class="wc-image" ref="wrapper" @click=${this.onClick}>
         <img
diff --git a/src/image/preview.js b/src/image/preview.js
index d2cc274..e127ace 100644
--- a/src/image/preview.js
+++ b/src/image/preview.js
@@ -6,6 +6,7 @@
 
 import { css, html, Component, styleMap, bind, unbind } from '@bd/core'
 import '../icon/index.js'
+
 class ImagePreview extends Component {
   static props = {
     list: {
@@ -17,7 +18,7 @@ class ImagePreview extends Component {
     'max-zoom': 3,
     'min-zoom': 1 / 3
   }
-  active = 0
+
   static styles = css`
     :host {
       z-index: 1;
@@ -103,6 +104,15 @@ class ImagePreview extends Component {
       }
     }
   `
+  active = 0
+  #state = {
+    scale: 1,
+    rotate: 0,
+    duration: 0.2,
+    x: 0,
+    y: 0
+  }
+
   pre() {
     this.toggleImage(this.active - 1)
   }
@@ -166,17 +176,12 @@ class ImagePreview extends Component {
   close() {
     this.visible = false
   }
-  #state = {
-    scale: 1,
-    rotate: 0,
-    duration: 0.2,
-    x: 0,
-    y: 0
-  }
+
   #setState(data) {
     Object.assign(this.#state, data)
     this.$requestUpdate()
   }
+
   mounted() {
     this.$on('wheel', e => {
       e.preventDefault()
@@ -208,6 +213,7 @@ class ImagePreview extends Component {
       })
     })
   }
+
   render() {
     let { scale, rotate, duration, x, y } = this.#state
     let styles = styleMap({