So kapseln Sie die Karussellkomponente in Vue3

<Vorlage>
  <div Klasse="mein-Karussell" @mouseenter="Stopp" @mouseleave="Start">
    <ul Klasse="Karussell-Body">
      <li v-for="(item, i) in findBannerList" :key="item.id" class="carousel-item" :class="{ fade: index === i }">
        <RouterLink zu="/">
          <img :src="item.imgUrl" alt="Bild" />
        </RouterLink>
      </li>
    </ul>
    <a @click="clickFn(-1)" href="javascript:;"
    <a @click="clickFn(1)" href="javascript:;" Klasse="carousel-btn next"><i Klasse="iconfont icon-angle-right"></i></a>
    <div Klasse="Karussell-Anzeige">
      <span @click="active(i)" v-for="(item, i) in findBannerList" :key="i" :class="{ active: index === i }"></span>
    </div>
  </div>
</Vorlage>

<Skript>
importiere { onUnmounted, ref, watch } von 'vue'
Standard exportieren {
  Name: 'Karussell',
  Requisiten: {
    findBannerList: {
      Typ: Array,
      Standard: () => []
    },
    Autoplay:
      Typ: Boolean,
      Standard: true
    },
    Dauer: {
      Typ: Nummer,
      Standard: 3
    }
  },
  setup(Requisiten) {
    konstanter Index = ref(0)
    // Definieren Sie einen konstanten Speichertimer const timer = ref(null)
    // Timermethode zum Erreichen eines automatischen Karusselleffekts const autoplayFn = () => {
      // Anti-Shake, um mehrfaches Auslösen des Timers zu verhindern clearInterval(timer.value)
      timer.value = setzeIntervall(() => {
        index.wert += 1
        wenn (index.wert >= props.findBannerList.länge) {
          Indexwert = 0
        }
      }, Eigenschaften.Dauer * 1000)
    }
    // Listener, basierend auf den von der Schnittstelle zurückgegebenen Daten und den übergebenen zugehörigen Attributparametern startet Autoplay das Karussell // Hören Sie auf die Länge der zurückgegebenen Daten. Wenn die Länge größer als 1 ist und Autoplay wahr ist, starten Sie das Karussell.
      () => props.findBannerList,
      () => {
        wenn (props.findBannerList.length > 1 und props.autoplay) {
          autoplayFn()
        }
      }
    )
    // Bewegen Sie die Maus in das Karussell, um die automatische Wiedergabe zu stoppen const stop = () => {
      wenn (Timer.Wert) ClearInterval(Timer.Wert)
    }
    // Bewegen Sie die Maus aus dem Karussell und starten Sie den Timer const start = () => {
      wenn (props.findBannerList.length > 1 und props.autoplay) {
        autoplayFn()
      }
    }
    // Klicken Sie auf die linken und rechten Schaltflächen auf dem Karussell, um das Karussell zu wechseln. Die übergebenen Parameter bestimmen, ob sich das Karussell nach links oder rechts bewegt. const clickFn = e => {
      index.wert += e
      wenn (index.wert >= props.findBannerList.länge) {
        index.wert = 0
      }
      wenn (Indexwert < 0) {
        index.value = props.findBannerList.length - 1
      }
    }
    // Klicken Sie auf den Indikator (den kleinen Punkt unter dem Karussell), um das Karussell umzuschalten const active = e => {
      index.wert = e
    }
    //Liebesbrief-Timer, wenn Komponente zerstört wird, um Leistungsverlust zu vermeiden onUnmounted(() => {
      wenn (Timer.Wert) ClearInterval(Timer.Wert)
    })
    return { index, stop, start, clickFn, aktiv }
  }
}
</Skript>
<style scoped lang="weniger">
.mein-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>

importiere MyCarousel aus „./my-carousel.vue“
Standard exportieren {
  installieren(App) {
    app.component(MeinKarussell.name, MeinKarussell)
  }
}

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere MyUI aus „./components/library“

// Um ​​das Plugin zu verwenden, verwenden Sie app.use(plugin) in main.js
erstelleApp(App).verwenden(MyUI).mount('#app')

<Vorlage>
  <div Klasse="Home-Banner">
    <MyCarousel :findBannerList="findBannerList" :autoplay="true" :duration="3" />
  </div>
</Vorlage>