<template> <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" 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" 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" v-if="!status || status >= 3" /> </svg> </template> <script lang="ts"> import { Component, Prop, Vue, Watch } from "vue-property-decorator"; @Component({ components: {} }) export default class VoiceIcon extends Vue { @Prop({ default: 25 }) private size!: number; @Prop() private loading!: boolean; private status = 0; private interval = 0; @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>