Native JS-Kapselung vue Tab-Umschalteffekt

In diesem Artikelbeispiel wird der spezifische Code der nativen JS-Kapselung Vue Tab Switching als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Schauen Sie sich zunächst das Effektbild an

Verwendete Technologie

vue, js, css3

Vue-Komponenten können direkt verwendet werden

<Vorlage>
  <div Klasse="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'Freund' : 'Bücherliste'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'aktiv' : ''">
        Buchfreunde</li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'aktiv' : ''">
        Bücherliste</li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Komponenten: {},
  Daten() {
    zurückkehren {
      HeaderAktiv: 0,
    };
  },
  berechnet: {},
  erstellt() {},
  montiert() {
    //Senden initialisieren this.$emit("change", this.headerActive);
  },
  Methoden: {
    Headeränderung(index) {
      Dies.headerActive = Index;
      dies.$emit("ändern", index);
    },
  },
};
</Skript>

<style lang="less" scoped>
.bookcircle-header {
  Höhe: 42px;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  .wrapper {
    Breite: 286px;
    Schriftgröße: 14px;
    Höhe: 29px;
    Farbe: #1489fe;
    Rand: 1px durchgezogen #1489fe;
    Rahmenradius: 14px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Position: relativ;
    box-sizing: border-box; // Randüberlauf beheben und Rand in die Box einschließen li {
      biegen: 1;
      Höhe: 100%;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      Z-Index: 2;
    }
    .aktiv {
      Farbe: weiß;
    }
    &::vor {
      Inhalt: "";
      Breite: 143px;
      Höhe: 100%;
      Hintergrundfarbe: #1489fe;
      Position: absolut;
      oben: 0px;
      links: 0px;
      Rahmenradius: 13px 0px 0px 13px;
      Z-Index: 1;
      Übergang: alle 0,3 s;
    }
    &.Freund::vor {
      transformieren: übersetzenX(0);
      Rahmenradius: 13px 0px 0px 13px;
    }
    &.booklist::before {
      transformieren: übersetzenX(100%);
      Rahmenradius: 0px 13px 13px 0px;
    }
  }
}
</Stil>

Umsetzungsprinzip:

Verwenden Sie ul, li und flexible Box. Legen Sie zuerst die Breite und Höhe des übergeordneten Elements fest. Verwenden Sie dann die flexible Box, um das untergeordnete Element li horizontal zu erweitern. Legen Sie flex: 1 für das untergeordnete Element li fest, damit das untergeordnete Element die Breite des übergeordneten Elements hat.

Legen Sie dann ein Pseudoelement für das übergeordnete Element fest, um das erste li-Element absolut positioniert abzudecken, und verwenden Sie das Z-Index-Attribut, um die hierarchische Anzeigebeziehung zwischen dem Pseudoelement und dem untergeordneten Element zu steuern.

Legen Sie dann das Übergangsattribut für das Pseudoelement fest und verwenden Sie das Attribut „transform: translateX();“, um das Element horizontal zu verschieben.

Notiz:

1. Obwohl das Klickereignis des Schalters auf dem untergeordneten Element liegt und der aktive Stil dem untergeordneten Element hinzugefügt wird, wird der Umschalteffekt der Registerkarte nicht durch das untergeordnete Element, sondern durch das Pseudoelement des übergeordneten Elements erreicht.
2. Sie müssen eine dynamische Klasse für das übergeordnete Element basierend auf dem Index des untergeordneten Elements festlegen, damit das Pseudoelement des übergeordneten Elements die Umschaltanimation basierend auf dem ausgewählten untergeordneten Element ausführen kann
3. Diese Komponente verwendet Taobao amfe-flexible und Postcss-Anpassung. Bitte achten Sie bei der Verwendung auf die Anpassungsprobleme.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.