优化代码结构

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

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({