Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

<Vorlage>
  <div>
    <Sweiper v-model="ausgewählt">
      <!--v-model ist eine Syntaxvereinfachung, die den Wert- und Eingabeereignissen entspricht-->
      <Sweiper-Artikelname="Artikel1">
        <div Klasse="Artikel">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-Artikel>
      <Sweiper-Artikelname="Artikel2">
        <div Klasse="Artikel">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-Artikel>
      <Sweiper-Artikelname="Artikel3">
        <div Klasse="Artikel">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-Artikel>
    </Sweiper>
  </div>
</Vorlage>
Die Bilder werden hier nicht mit v-for durch das Array geschleust, so dass man die Struktur erkennen kann<script>
  importiere Sweiper aus "../components/Sweiper.vue";
  importiere SweiperItem aus "../components/SweiperItem.vue";
  Standard exportieren {
    Name: "mySweiper",
    Komponenten:
      Schwieger,
      SweiperArtikel
    },
    Daten() {
      zurückkehren {
        ausgewählt: "item1", //Standard ist das erste Element}
    },
    Methoden:{
      getImg(url){
        gibt "img/"+url+".jpg" zurück
      },

    },
    montiert(){
      /*Intervall festlegen(()=>{
       Dies.ausgewählt="Element2"
  },3000)
  Da Mounted zu diesem Zeitpunkt nur einmal ausgeführt wird, bleibt es unverändert. Sie müssen einen Watch-Listener in Sweiper schreiben}*/Dieser Schritt ist kommentiert, da er in der Sweiper-Komponente geschrieben ist}
</Skript>
<Stil>
  .Artikel{
    /*Rand: 1px durchgehend schwarz;*/
  }
  .item>img{
    Breite: 100 %;
    /*Höhe: 0,1rem;*/
  }
</Stil>

<Vorlage>
  <div Klasse="Sweiper">
    <Steckplatz></Steckplatz>
  </div>
</Vorlage>
<Skript>

  Standard exportieren {
    Name: "Sweiper",
    Daten() {
      zurückkehren {
        aktuell:''
      }
    },
    Requisiten:{
      Wert:{
        Typ: Zeichenfolge,
        Standard:""
      },
    },
    montiert(){
      //Suchen Sie während des automatischen Karussells nach dem Namenswert und verwenden Sie die Methode indexOf, um die folgende Tabelle des aktuellen Karussells zu durchlaufen this.names=this.$children.map(child=>{
       Kindname zurückgeben
      });
      dies.showImg();
      dies.paly()
    },
    Methoden:{
      zeigeImg(){
        dies.aktuell=dieser.Wert||dieses.$Kinder[0].Name;
        //Direkte untergeordnete Komponente der aktuellen Instanz this.$children.map(vm=>{
          vm.selected = dies.aktuell
        })
      },

      spielen(){
        //Passen Sie das Bild bei jedem Abspielen des Karussells an. this.timer=setInterval(()=>{
          //indexOf gibt das erste Vorkommen einer angegebenen Zeichenfolge zurück const index = this.names.indexOf(this.current);
          sei neuerIndex=index+1;
          //Seien Sie strenger, wenn (newIndex===this.names.length){
             neuerIndex=0;
          }
          dies.$emit("Eingabe",dies.Namen[neuerIndex])
        },3000)
      }
    },
    betrachten:{
      //Wert überwachen, Auswahl ändern, wenn er sich ändert
      Wert(){
        dies.showImg()
      }
    },
    vorZerstören() {
      //clearInterval(this.timer), bevor die Spalte zerstört wird
    }
  };
</Skript>
<Stil>
  .Sweiper{
    /*Rand: 1px durchgehend schwarz;*/
    Breite: 100 %;
    Höhe: 4rem;
    Überlauf: versteckt;
    Rand: 0 automatisch;
    Position: relativ;
  }
</Stil>

<Vorlage>
  <Übergang>
    <div Klasse="Sweiper-item" v-show="isShow">
      <Steckplatz></Steckplatz>
    </div>
  </Übergang>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: „SweiperItem“,
    Daten(){
      zurückkehren {
        ausgewählt:""
      }
    },
    Requisiten:{
      Name:{
        Typ: Zeichenfolge,
        erforderlich: wahr
      },
    },
    montiert(){

    },
    berechnet:{
      istAnzeigen(){
        gib dies.ausgewählt===diesen.Namen zurück;
      }
    }
  };

</Skript>
<Stil>
  .v-aktiv eintreten,.v-aktiv verlassen{
    Übergang: alles 1en linear;
  }
  .v-verlassen-zu{
    transformieren: übersetzen(-100%);
  }
  .v-eingeben{
    transformieren: übersetzen (100 %);
  }
  .v-enter-active{
    Position: absolut;
    oben: 0;
    links: 0;
  }
</Stil>