完成loading组件的重构

src/image-preview/index.js

@@ -138,7 +138,7 @@ class ImagePreview extends Component {
     this.setZoom(this.#state.scale / 1.2)
   }
   setZoom(val) {
-    const { maxZoom, minZoom } = this
+    let { maxZoom, minZoom } = this
     val = Math.max(val, minZoom)
     val = Math.min(val, maxZoom)
     val = val.toFixed(2)
@@ -195,7 +195,7 @@ class ImagePreview extends Component {
     bind(this.$refs.images, 'mousedown', e => {
       let { clientX: startX, clientY: startY } = e
       let { x, y } = this.#state
-      const onmousemove = bind(document, 'mousemove', e => {
+      let onmousemove = bind(document, 'mousemove', e => {
         e.preventDefault()
         let { clientX, clientY } = e
         let deltaX = clientX - startX
@@ -206,7 +206,7 @@ class ImagePreview extends Component {
           y: deltaY + y
         })
       })
-      const onmouseup = bind(document, 'mouseup', _ => {
+      let onmouseup = bind(document, 'mouseup', _ => {
         unbind(document, 'mousemove', onmousemove)
         unbind(document, 'mouseup', onmouseup)
       })

src/loading/index.js

@@ -4,23 +4,28 @@
  * @date 2023/04/26 15:20:28
  */
 
-import { html, css, Component, styleMap, nextTick } from 'wkit'
+import { html, css, Component, styleMap } from 'wkit'
 
 class Loading extends Component {
   static props = {
+    progress: 'num!0',
+    duration: 3000,
     value: {
       type: Boolean,
-      default: false,
       observer(v) {
-        if (v && this.loading) {
+        if (this.duration > 0) {
-          this.#start = void 0
+          if (v) {
-          this.value = false
+            requestAnimationFrame(this.#loading.bind(this))
-          this.#progress = 0
+          }
-          requestAnimationFrame(this.loading)
+        } else {
+          if (v) {
+            this.setAttribute('loading', '')
+          } else {
+            this.removeAttribute('loading')
+          }
         }
       }
-    },
+    }
-    duration: 3000
   }
 
   static styles = [
@@ -37,58 +42,60 @@ class Loading extends Component {
 
       .thumb {
         width: 0;
-        height: 1px;
+        height: var(--wc-loading-height, 2px);
-        background: var(--color-teal-1);
+        background: var(--wc-loading-background, var(--color-teal-1));
-        box-shadow: 0 0 5px var(--color-teal-1);
+        box-shadow: 0 0 5px var(--wc-loading-background, var(--color-teal-1));
+        will-change: width;
+        transition: width 0.1s linear;
+      }
+
+      :host([loading]) {
+        .thumb {
+          width: 25% !important;
+          animation: autoplay 1s infinite ease-in-out;
+        }
+      }
+
+      @keyframes autoplay {
+        from,
+        to {
+          transform: translateX(0);
+        }
+        50% {
+          transform: translateX(calc(100vw - 100%));
+        }
       }
     `
   ]
 
-  #force2end = false
+  #start
-  #start = 0
-  #progress = 0
 
-  end() {
+  #loading(stamp) {
-    this.#force2end = true
+    if (this.#start === void 0) {
-  }
+      this.#start = stamp
-
-  mounted() {
-    this.loading = timestamp => {
-      if (this.#force2end) {
-        if (this.#progress === 100) {
-          this.#force2end = false
-          this.#progress = 0
-          this.$requestUpdate()
-          return
-        }
-        this.#progress = 100
-        this.$requestUpdate()
-      } else {
-        if (this.#start === void 0) {
-          this.#start = timestamp
-        }
-
-        let _time = timestamp - this.#start
-
-        let tmp = ~~(_time / (this.duration / 100))
-        if (tmp !== this.#progress) {
-          this.#progress = tmp
-          this.$requestUpdate()
-        }
-
-        if (_time > this.duration) {
-          this.#progress = 0
-          return
-        }
-      }
-
-      requestAnimationFrame(this.loading)
     }
+
+    let time = stamp - this.#start
+    let tmp = ~~(time / (this.duration / 100))
+
+    if (tmp !== this.progress) {
+      this.progress = tmp
+    }
+
+    if (time > this.duration) {
+      this.progress = 0
+      this.#start = void 0
+      this.value = false
+      this.$emit('input')
+      this.$emit('change')
+      return
+    }
+    requestAnimationFrame(this.#loading.bind(this))
   }
 
   render() {
-    let pc = styleMap({ width: this.#progress + '%' })
+    let style = styleMap({ width: this.progress + '%' })
-    return html` <span class="thumb" style=${pc}></span> `
+    return html` <span class="thumb" style=${style}></span> `
   }
 }