Implementierung der Funktion der kreisförmigen prozentualen Fortschrittsbalkenkomponente von Vue

<Vorlage>
  <div Klasse="Prozentschleife">
    <div Klasse="Kreis-links">
      <div ref="leftcontent"></div>
    </div>
    <div Klasse="Kreis-rechts">
      <div ref="rightcontent"></div>
    </div>
    <div Klasse="Nummer">
      {{ Prozent }} %
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten: {
    Prozentzahl: {
      Typ: [Zeichenfolge, Zahl],
      Standard: 0
    },
    Geschwindigkeit: { // Der empfohlene Wert ist 0-3
      Typ: [Zeichenfolge, Zahl],
      Standard: 1
    }
  },
  Daten () {
    zurückkehren {
      Prozent: 0,
      initDeg: 0,
      Zeit-ID: null,
      Animation: falsch
    }
  },
  Methoden: {
    transformToDeg (Prozent) {
      sei Grad = 0
      wenn (Prozent >= 100) {
        Grad = 360
      } anders {
        Grad = parseInt(360 * Prozent / 100)
      }
      Rückkehrgrad
    },
    transformToPercent(Grad) {
      sei Prozent = 0
      wenn (Grad >= 360) {
        Prozent = 100
      } anders {
        Prozent = parseInt(100 * Grad / 360)
      }
      Rendite in Prozent
    },
    rotateLeft (deg) { // Wenn der Winkel größer als 180 ist, wird die Animation ausgeführt. $refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
    },
    rotateRight (deg) { // Wenn der Winkel kleiner als 180 ist, wird die Animation ausgeführt. $refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
    },
    geheDrehen(Grad) {
      diese.animationing = true
      diese.ZeitId = setInterval(() => {
        if (deg > this.initDeg) { // Inkrementelle Animation this.initDeg += Zahl(this.speed)
          wenn (this.initDeg >= 180) {
            dies.rotateLeft(dieses.initDeg)
            this.rotateRight(180) // Um ​​die Situation zu vermeiden, dass der aus den zweimal übergebenen Prozentsätzen konvertierte Wert keine Ganzzahl der Schrittlänge ist, was dazu führen kann, dass die Links- und Rechtsdrehung fehlschlägt.
          } anders {
            dies.rechtsdrehen(dieses.initDeg)
          }
        } sonst { // Animation verringern this.initDeg -= Number(this.speed)
          wenn (this.initDeg >= 180) {
            dies.rotateLeft(dieses.initDeg)
          } anders {
            this.rotateLeft(180) // Um ​​die Situation zu vermeiden, dass der aus den zweimal übergebenen Prozentsätzen konvertierte Wert keine Ganzzahl der Schrittlänge ist, was dazu führen kann, dass die Links- und Rechtsdrehung fehlschlägt.
            dies.rechtsdrehen(dieses.initDeg)
          }
        }
        this.percent = this.transformToPercent(this.initDeg) // Prozentuale Daten-Scroll-Animation const remainer = Number(deg) - this.initDeg
        wenn (Math.abs(Rest) < diese.Geschwindigkeit) {
          this.initDeg += Rest
          wenn (this.initDeg > 180) {
            dies.rotateLeft(Grad)
          } anders {
            dies.nachRechts drehen(Grad)
          }
          diese.animationFinished()
        }
      }, 10)
    },
    animationFertig () {
      this.percent = this.percentNum // Prozentdaten-Scrollanimation this.animationing = false
      Löschintervall(diese.ZeitID)
      this.$emit('animationFinished') // Rückruf, wenn die Animation abgeschlossen ist}
  },
  erstellt () {
    dies.goRotate(dieses.transformToDeg(dieses.percentNum))
  },
  betrachten:
    'Prozentzahl': Funktion (Wert) {
      wenn (diese.Animation) return
      dies.goRotate(dies.transformToDeg(val))
    }
  }
}
</Skript>

<style scoped lang="scss">
.Prozentschleife {
  Position: relativ;
  Breite: 100 %;
  Höhe: 100%;
  Randradius: 50 %;
  Überlauf: versteckt;
  .Kreis-links, .Kreis-rechts {
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 50%;
    Höhe: 100%;
    Hintergrundfarbe: rot;
    Überlauf: versteckt;
    &>div {
      Breite: 100 %;
      Höhe: 100%;
      Hintergrundfarbe: #8a8a8a;
      Transform-Origin: rechts Mitte;
      /*Übergang: alle 0,5 s linear;*/
    }
  }
  .Kreis-rechts {
    links: 50%;
    &>div {
      Transform-Origin: links Mitte;
    }
  }
  .Nummer {
    Position: absolut;
    oben: 9%;
    unten: 9 %;
    links: 9%;
    rechts: 9%;
    Hintergrundfarbe: #fff;
    Randradius: 50 %;
    Überlauf: versteckt;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Farbe: #000;
  }
}
</Stil>