Vue realisiert den Prozentbalkeneffekt

<Vorlage>
  <div Klasse="Über">
    <!-- <h1>Dies ist eine Infoseite</h1> -->
    <div Klasse="Schritt">
      <!-- Wenn die linke Seite 100 % beträgt, wird das Hypothenuse-Dreieck nicht angezeigt und der rechte Winkel wird vergrößert-->
      <div
        Klasse="links"
        v-show="linkerProzentsatz"
        :Klasse="[{ 'full-left': !rightPercent }, { 'tringle': rightPercent }]"
        :Stil="{ Breite: linkerProzentsatz+'%' }"
        @mouseover="onMouseTooltip(LINKE LEISTE, TIP ANZEIGEN)"
        @mouseleave="onMouseTooltip(LINKE LEISTE, TIP AUSBLENDEN)"
      >
        <div Klasse = "bar-tip-box" v-show = "leftBar.isShowTip">
          <p>Gesamt: {{ totalNum }}</p>
          <p>Grüner Prozentsatz: {{ leftPercent }}%</p>
        </div>
        <div Klasse = "Tip-Pfeil" v-show = "leftBar.isShowTip"></div>
        {{ leftPercent }}%
      </div>
      <div
        Klasse="richtig"
        v-show="richtigerProzentsatz"
        :Klasse="[{ 'full-right': !leftPercent }]"
        @mouseover="onMouseTooltip(RECHTE_LEISTE, TIP_ANZEIGEN)"
        @mouseleave="onMouseTooltip(RECHTE_LEISTE, TIP AUSBLENDEN)"
      >
        <div Klasse = "bar-tip-box" v-show = "rightBar.isShowTip">
          <p>Gesamt: {{ totalNum }}</p>
          <p>Grauanteil: {{ rightPercent }}%</p>
        </div>
        <div Klasse = "Tip-Pfeil" v-show = "rightBar.isShowTip"></div>
        {{ rightPercent }}%
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
const LEFT_BAR = "links";
const RIGHT_BAR = "rechts";
const SHOW_TIP = "anzeigen";
const HIDE_TIP = "ausblenden";

Standard exportieren {
  Daten() {
    zurückkehren {
      LINKE_LEISTE: LINKE_LEISTE,
      RECHTE_LEISTE: RECHTE_LEISTE,
      TIPP ANZEIGEN: TIPP ANZEIGEN,
      HIDE_TIP: HIDE_TIP,
      Gesamtanzahl: 1000,
      leftPercent: 100,
      linkeLeiste: {
        isShowTip: false,
        delayOut: null
      },
      rechte Leiste: {
        isShowTip: false,
        delayOut: null
      }
    };
  },
  Methoden: {
    beiMausTooltip(tipTyp, aktionsTyp) {
      lass bar = null;
      wenn (tipType == LEFT_BAR) {
        Balken = diese.linkeLeiste;
      } sonst wenn (tipType == RIGHT_BAR) {
        bar = diese.rechteLeiste;
      } anders {
        zurückkehren;
      }
      wenn (Aktionstyp === SHOW_TIP) {
        this.showBarTooltip(Leiste);
      } sonst wenn (Aktionstyp === HIDE_TIP) {
        this.hideBarTooltip(bar);
      } anders {
        zurückkehren;
      }
    },
    showBarTooltip(bar) {
      if (bar.delayOut != null) {
        Zeitüberschreitung löschen(bar.delayOut);
      }
      bar.delayOut = null;
      bar.isShowTip = true;
    },
    hideBarTooltip(Leiste) {
      Zeitüberschreitung löschen(bar.delayOut);
      bar.delayOut = setzeTimeout(Funktion() {
        bar.isShowTip = falsch;
      }, 100);
    },
  },
  berechnet: {
    rechterProzentsatz: Funktion(){
      gibt 100 zurück – this.leftPercent;
    }
  }
};
</Skript>

<style lang="less" scoped>
.Schritt {
  Position: relativ;
  Anzeige: Flex;
  Rand: 100px;
  Breite: 200px;
  Schriftgröße: 0;
  .links {
    Flex-Wachstum: 0;
    Position: relativ;
    Anzeige: Inline-Block;
    Hintergrund: #62c87f;
    Farbe: #fff;
    Textausrichtung: zentriert;
    Schriftstärke: fett;
    Breite: 70%;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Höhe: 20px;
    Mindestbreite: 30px;
    Rahmen oben links – Radius: 5px;
    Rahmen unten links – Radius: 5px;
  }
  // Diese Pseudoklasse wird nicht immer angezeigt.tringle::after {
    Inhalt: " ";
    Position: absolut;
    oben: 0;
    rechts: -8px;
    Rahmenbreite: 20px 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: #62c87f transparent transparent transparent;
    Z-Index: 10;
  }

  .Rechts {
    Flex-Wachstum: 1;
    Position: relativ;
    Anzeige: Inline-Block;
    /* Breite: 30 %; */
    Hintergrund: #d0d4dc;
    Farbe: #333;
    Schriftstärke: fett;
    Textausrichtung: zentriert;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Höhe: 20px;
    Textausrichtung: zentriert;
    Mindestbreite: 35px;
    Rahmen oben rechts – Radius: 5px;
    Rahmen unten rechts – Radius: 5px;
  }

  .ganz links{
    Rahmen oben rechts – Radius: 5px;
    Rahmen unten rechts – Radius: 5px;
  }

  .vollständig rechts{
    Rahmen oben links – Radius: 5px;
    Rahmen unten links – Radius: 5px;
  }

  .Spitze-Pfeil {
    Position: absolut;
    links: 50%;
    oben: -10px;
    Anzeige: Inline-Block;
    Breite: 7px;
    Höhe: 7px;
    transformieren: drehenZ(45 Grad);
    -webkit-transform:rotateZ(45 Grad);
    Hintergrundfarbe: #7f7f7f;
    Z-Index: 10;
  }

  .bar-tip-box {
    Position: absolut;
    oben: -5px;
    rechts: 50%;
    transformieren: übersetzen(50 %, -100 %);
    Textausrichtung: links;
    Polsterung: 5px 10px;
    Breite: maximaler Inhalt;
    Farbe: #fff;
    Schriftgröße: 12px;
    Schriftstärke: 400;
    Rahmenradius: 3px;
    Hintergrundfarbe: #7f7f7f;
    Z-Index: 10;

    P {
      Rand: 0;
      Polsterung unten: 5px;
    }
  }
}
</Stil>