Vue3.0 handgeschriebener Karusselleffekt

In diesem Artikel wird der spezifische Code des handgeschriebenen Karusselleffekts von Vue3.0 zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Lasst uns beginnen

HTML-Struktur

<Vorlage>
  <div Klasse="xtx-Karussell" @mouseleave="enterFn" @mouseenter="leaveFn">
    <ul Klasse="Karussell-Body">
      <li Klasse="Karussell-Element" :Klasse="{ fade: indexid === index }" v-for="(Element, Index) in Liste" :Schlüssel="Element.id">
        <RouterLink zu="/">
          <img :src="item.imgUrl" alt="" />
        </RouterLink>
      </li>
    </ul>
    <a href="javascript:;" Klasse="carousel-btn prev" @click="lastPage"><i Klasse="iconfont icon-angle-left"></i></a>
    <a href="javascript:;" Klasse="Karussell-btn weiter" @click="nextPage"><i Klasse="iconfont icon-angle-right"></i></a>
    <div Klasse="Karussell-Anzeige">
      <span @click="indexid = i - 1" v-for="i in Liste.Länge" :key="i" :class="{ aktiv: indexid === i - 1 }"></span>
    </div>
  </div>
</Vorlage>

js-Syntax

<Skript>
importiere { ref, watch, onUnmount } von 'vue'
Standard exportieren {
  Name: 'Karussell',
  Requisiten: {
    // Bilddatenliste: {
      Typ: Objekt,
      Standard: () => {}
    },
    // Dauer jedes Schaltvorgangs des Karussells: {
      Typ: Nummer,
      Standard: 2
    },
    // Ob die automatische Wiedergabe des Karussells aktiviert werden soll: {
      Typ: Boolean,
      Standard: true
    },
    // Klicken, um mehrere Seiten umzublättern: {
      Typ: Nummer,
      Standard: 1
    }
  },
  setup(Requisiten) {
    // Index const indexid = ref(0)
    // Karussell const timer = ref(null)
    const TimeFn = () => {
      Intervall löschen(Timer)
      // Lösche den vorherigen Timer vor jeder Ausführung timer.value = setInterval(() => {
        indexid.wert++
        // Wenn der Grenzwert überschritten wird, neu auffüllen, wenn (indexid.value > props.list.length - 1) {
          indexid.value = 0
        }
      }, Eigenschaften.Dauer * 1000)
    }
    // Klick + nächstes Stoppbild const nextPage = () => {
      indexid.value += props.page
      wenn (indexid.value > props.list.length - 1) {
        indexid.value = 0
      }
    }
    // Klick + vorheriges Bild const lastPage = () => {
      indexid.value -= Eigenschaften.Seite
      wenn (indexid.value < 0) {
        indexid.value = props.list.length - 1
      }
    }
    // Timer löschen const leaveFn = () => {
      // console.log('Timer löschen')
      Intervall löschen(Timer.Wert)
      // konsole.log(Zeitgeber)
    }
    // Komponentenverbrauch, Bereinigungstimer onUnmounted(() => {
      Intervall löschen(Timer.Wert)
    })
    //Starte den Zeitgeber const enterFn = () => {
      wenn (props.list.length > 1 und props.autoplay) {
        // console.log('Timer starten')
        ZeitFn()
      }
    }
    betrachten(
      () => Eigenschaftenliste,
      () => {
        wenn (props.list.length > 1 und props.autoplay) {
          ZeitFn()
        }
      }
    )
    return { indexid, leaveFn, enterFn, nächsteSeite, letzteSeite }
  }
}
</Skript>

CSS-Stile

<style scoped lang="weniger">
.xtx-Karussell {
  Breite: 100 %;
  Höhe: 100%;
  Mindestbreite: 300px;
  Mindesthöhe: 150px;
  Position: relativ;
  .Karussell {
    &-Körper {
      Breite: 100 %;
      Höhe: 100%;
    }
    &-Artikel {
      Breite: 100 %;
      Höhe: 100%;
      Position: absolut;
      links: 0;
      oben: 0;
      Deckkraft: 0;
      Übergang: Deckkraft 0,5 s linear;
      &.verblassen {
        Deckkraft: 1;
        Z-Index: 1;
      }
      img {
        Breite: 100 %;
        Höhe: 100%;
      }
    }
    &-Indikator {
      Position: absolut;
      links: 0;
      unten: 20px;
      Z-Index: 2;
      Breite: 100 %;
      Textausrichtung: zentriert;
      Spanne {
        Anzeige: Inline-Block;
        Breite: 12px;
        Höhe: 12px;
        Hintergrund: rgba(0, 0, 0, 0,2);
        Randradius: 50 %;
        Cursor: Zeiger;
        ~ Spanne {
          Rand links: 12px;
        }
        &.aktiv {
          Hintergrund: #fff;
        }
      }
    }
    &-btn {
      Breite: 44px;
      Höhe: 44px;
      Hintergrund: rgba(0, 0, 0, 0,2);
      Farbe: #fff;
      Randradius: 50 %;
      Position: absolut;
      oben: 228px;
      Z-Index: 2;
      Textausrichtung: zentriert;
      Zeilenhöhe: 44px;
      Deckkraft: 0;
      Übergang: alle 0,5 s;
      &.vorherige {
        links: 20px;
      }
      &.nächste {
        rechts: 20px;
      }
    }
  }
  &:schweben {
    .Karussell-btn {
      Deckkraft: 1;
    }
  }
}
</Stil>

Als globales Plugin registrieren

Karussell aus „../carousel.vue“ importieren
// Vue2.0-Plugin schreibt Elemente: ein Objekt exportieren, über eine Installationsfunktion verfügen, standardmäßig einen Vue-Konstruktor übergeben, Vue basierend auf erweitern // Vue3.0-Plugin schreibt Elemente: ein Objekt exportieren, über eine Installationsfunktion verfügen, standardmäßig eine App-Anwendungsinstanz übergeben, App basierend auf Exportstandard erweitern {
  installieren(App) {
    // Erweitern Sie die App, die App bietet eine Komponentendirektivfunktion // Wenn Sie den Prototypen mit der Methode app.config.globalProperties mounten möchten, app.component(Carousel.name, xtxCarousel)
  }
}

In der Eintragsdatei main.js einbinden

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
importiere libraryUI von '@/components/library/index' // eigenes Plugin createApp(App)
  .use(speichern)
  .use(Router)
  .use(libraryUI) // Das Plugin einbinden.mount('#app')

Wie verwende ich das Plugin?

<Karussell :list="Liste" Dauer="1" />

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.

Das könnte Sie auch interessieren: