u

components/message-item/voice.vue

@@ -2,68 +2,70 @@
     <svg
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
-        t="1595840909244"
         class="icon"
         viewBox="0 0 1024 1024"
         version="1.1"
-        p-id="11656"
         :width="size"
         :height="size"
     >
         <path
             d="M56.888889 512a105.016889 102.4 90 1 0 204.8 0 105.016889 102.4 90 1 0-204.8 0Z"
-            fill="#8D959D"
-            p-id="11657"
+            :fill="fill"
             v-if="!status || status >= 1"
         />
         <path
             d="M425.415111 782.449778a68.266667 68.266667 0 0 1-97.792-95.288889A249.912889 249.912889 0 0 0 398.222222 512c0-66.787556-25.713778-129.137778-70.542222-175.160889a68.266667 68.266667 0 0 1 97.735111-95.288889A386.389333 386.389333 0 0 1 534.755556 512c0 102.627556-39.822222 199.111111-109.340445 270.449778z"
-            fill="#8D959D"
-            p-id="11658"
+            :fill="fill"
             v-if="!status || status >= 2"
         />
         <path
             d="M618.496 980.48a68.266667 68.266667 0 0 1-97.792-95.288889A532.707556 532.707556 0 0 0 671.288889 512a532.707556 532.707556 0 0 0-150.584889-373.191111A68.266667 68.266667 0 0 1 618.496 43.52 669.184 669.184 0 0 1 807.822222 512c0 177.891556-68.835556 344.917333-189.326222 468.48z"
-            fill="#8D959D"
-            p-id="11659"
+            :fill="fill"
             v-if="!status || status >= 3"
         />
     </svg>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+    import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
-@Component({ components: {} })
-export default class VoiceIcon extends Vue {
-    @Prop({ default: 25 })
-    private size!: number;
+    @Component({ components: {} })
+    export default class VoiceIcon extends Vue {
+        @Prop({ default: 25 })
+        private size!: number;
 
-    @Prop()
-    private loading!: boolean;
+        @Prop()
+        private loading!: boolean;
 
-    private status = 0;
-    private interval = 0;
+        @Prop()
+        private readonly white!: boolean;
 
-    @Watch("loading")
-    private onLoadingChanged() {
-        if (this.loading) {
-            this.interval = window.setInterval(() => {
-                const v = this.status + 1;
-                if (v > 3) {
-                    this.status = 0;
-                } else {
-                    this.status = v;
-                }
-            }, 500);
-        } else {
-            clearInterval(this.interval);
-            this.status = 0;
+        private status = 0;
+        private interval = 0;
+
+        private get fill() {
+            return this.white ? "#fff" : "#8D959D";
         }
-    }
 
-    beforeDestroy() {
-        clearInterval(this.interval);
+        @Watch("loading")
+        private onLoadingChanged() {
+            if (this.loading) {
+                this.interval = window.setInterval(() => {
+                    const v = this.status + 1;
+                    if (v > 3) {
+                        this.status = 0;
+                    } else {
+                        this.status = v;
+                    }
+                }, 500);
+            } else {
+                clearInterval(this.interval);
+                this.status = 0;
+            }
+        }
+
+        beforeDestroy() {
+            clearInterval(this.interval);
+        }
     }
-}
 </script>