Hozzon létre egy rugalmas karusszel komponenst

A VUE.JS a közelmúltban ugrott, és a hatodik leginkább villásprojekt lett Github Az írás idején, még a Facebook saját reaktjái előtt is. Biztonságosan azt mondhatom, hogy gyors lesz a főablakban webfejlesztés , és megbízható go-to JavaScript keretrendszer projektekben.

Ebben a bemutatóban a Vue.js-t használjuk, hogy egyszerű karusszel komponenseket hozzunk létre. Ez az összetevő számos különböző tulajdonságot fogad el, amelyek lehetővé teszik, hogy néhány alapvető beállításokat, például átmeneti sebességet, átmeneti típust, és hogy a karusszel automatikusan átálljon.

Ha mindez túlságosan trükkös, a weboldal építője A szerszám lehet több dolog. Boldog, hogy összetettebb webhelyet hozzon létre? Szükséged van web hosting amely megbirkózhat.

• Gyorsítsa fel a teljesítményt a VUE.JS-vel

Kezdeni, Töltse le a projektfájlokat itt (és mentse őket felhő tároló ) és nyissa meg a "Website-Sablon" könyvtárat a kívánt szövegszerkesztőben. Közben a terminálban, a CD-ben a "honlap-sablon", majd futtassa az "NPM telepítést" a projektek csomópontjainak telepítéséhez. Végül futtassa az "NPM Run Dev" parancsot egy fejlesztési kiszolgáló indításához, hogy megtekinthesse a projektet a böngészőben. Jellemzően ez lenne a "localhost: 8080".

01. Carousel Slide Files létrehozása

Az "SRC / Components" alkalmazásban hozzon létre egy "App-Carousel-Slide" nevű új könyvtárat, és két fájlban: "app-carousel-slide.vue" és "komponens.app-carousel-slide.scss". Ezek tartalmazzák az első két új Vue.js komponenst, amelyet létrehozunk, amelyek együtt használják, létrehozzuk karusszel komponenst.

02. Add hozzá a körhinta SCSS-t

A Fileilo csomagból másolja a "/support-files/step-02-slide.sss" tartalmát a "komponens.app-carousel-slide.scss" -be. Ez az SCS-ek a dia komponenshez, és a "Flex-Grow" tulajdonságot használják, hogy minden egyes csúszás kitöltse a szülő elemét.

03. Hozza létre a dia komponenst

Az üres "app-carousel-slide.vue" fájlban adja hozzá az alábbi részleteket a Vue.js komponens szerkezetének létrehozásához. Ezt alapítjuk, hogy építsük a karusszel csúszkát.

 & lt; sablon & gt; & lt; / sablon & gt;
& lt; script & gt;
Az alapértelmezett export {
  Név: 'app-carousel-slide'
}
& lt; / script & gt; 

04. Adjon hozzá egy sablon-nyílást a Carousel Slide képekhez

Az üres & lt; sablon & gt; A karusszel csúszda eleme, hozzáadunk egy "div" elemet a dia megjelenítéséhez, valamint egy speciális réselemmel, amelyet "kép" nevezünk. A VUE.js-ben a Slots lehetővé teszi, hogy a saját tartalmát az összetevő sablonjával összefonja, anélkül, hogy szerkesztené. Ebben az esetben ezeket használják, így később átadhatjuk a képet a dia háttérre, így a végeredmény, amikor végül használt, úgy néz ki, mint az "& lt; App-Carousel-slide & gt; img src = '' 'alt =' '& gt; & lt; / app-carousel-slide & gt;'.

 & lt; div osztály = "C-app-karusszel-csúszda" & gt;
  & lt; slot name = "kép" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Adja hozzá a dia szöveges tartályt

Minden, ami a csúszkotóelemhez marad, a szöveges tartály felépítése. A réseket újra használjuk, az egyik a nagyobb dia címére és az egyikre a rendszeres szöveghez. Az "V-IF" nevű VUE.js-ot is használjuk a logika hozzáadásához, amely csak a szöveges tartályt adja meg, ha a nyílások legalább egyike a tartalom megtartása. Adja hozzá ezt a részletet a "C-App-Carousel-Slide" -ba, közvetlenül a "kép" nyílás előtt.

 & lt; div osztály = "C-app-carousel-slide__text-blokk"
V-IF = "Ez. $ Slots ['Cím'] || Ez. $ Slots ['szöveg'] '& gt;
  & lt; h1 class = "C-app-carousel-slide__title"
  V-IF = "Ez. $ nyílások ['cím]" & gt;
  & lt; slot name = "Cím" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div osztály = "C-app-carousel-slide__text"
  V-IF = "Ez. $ nyílások [" szöveg "]" & gt;
  & lt; slot name = "szöveg" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Carousel fájlok létrehozása

Vissza „src / elemek”, hozzon létre egy új könyvtárat „app-körhinta”, majd azon belül két új fájlt: „app-carousel.vue” és „component.app-carousel.scss”. Ezek a két Vue.js komponensek második részét fogják tartani: maga a fő karusszel.

07. Add hozzá a Carousel CSS-t

Másolja a "/support-files/step-07-slide.ss" tartalmát az üres "komponens.app-carousel.scss" -be. Ez a fő karusszel komponens SCSS.

08. Carousel komponens létrehozása

Ezután az "App-Carousel.Vue" -ben felépítjük a karusszel komponens szerkezetét. Az "Appicon" komponenst és a "nyíl" svg-t importáljuk a karusszel következő és korábbi ikonjai későbbi használatához. Ezek együtt dolgoznak az "SVG-Sprite-Loader" függőséggel, hogy létrehozzanak egy alapvető SVG ikonrendszert, amely SVG "szimbólumok" és "használati" elemet használ.

 & lt; sablon & gt; & lt; / sablon & gt;
& lt; script & gt;
Az Appicon importálása
'@ / Components / App-Icon / App-Icon'
Import nyíl
'./../../assets/img/arrow.svg'
Az alapértelmezett export {
  Név: "App-Carousel",
  Alkatrészek: {
  appicon
  },
  adatok () {
  Visszatérés {
  nyíl
  }
  }
}
& lt; / script & gt; 

09. Építsd meg a körhinta sablont

Elkezdjük hozzáadni tartalmat az üres sablonelemhez. A fő érdeklődési terület itt a "C-App-Carousel__Container" elem, amelyet hamarosan kiszámítunk szélességet a benne található diákok számának számát. Ezután áthelyezjük a tartályt CSS transzformálással: Tord Translatex és Átmenetek a csúszdák mozgásának szimulálásához.

 & lt; div osztály = "C-app-Carousel" & gt;
  & lt; div osztály = "C-app-carousel__wrapper" & gt;
  & lt; div osztály = "C-app-carousel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Adja hozzá a karusszel vezérléseit és nyilakat

Ezután hozzá kell adnunk a HTML-t a karusszel vezérlők tartályához és az előző és a következő nyilakhoz; Ez utóbbi az ikonrendszerrel és a 8. lépésben importált SVG segítségével add hozzá ezeket a "C-app-Carousel__wrapper" elem után.

 & lt; App-icon class = "C-app-icon-arrow-prev c-app-carousel__arrow" = "arrow" / & gt;
& lt; div osztály = "C-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "C-app-icon-arrow-next C-app-carousel__arrow" = "arrow" / & gt; 

11. Hozzon létre egy karusszel adatboltot és adjon hozzá tulajdonságokat

Három új tulajdonságot adunk hozzá az összetevő adatainak tárolásához: "Slidetotal" fogja tartani a csúszdák teljes számát; Az "ActiveSlideIndex" rögzíti a látható dia indexét, így felhasználható a tartály pozíciójának kiszámításához; Míg az Autointerval felveszi az intervallum időzítőt, amely automatikus diavetítést indít. Mindezek Null-ra vannak állítva, kivéve az "ActiveSlideIndex" kivételével, ahol a "0" érték azt jelzi, hogy az első dia kell az alapértelmezett dia.

 Adatok () {
  Visszatérés {
  nyíl,
  Slidetotal: null,
  activeslideIndex: 0,
  Autointerval: Null
  }
} 

12. Számítsa ki a Slidetotal-t

Add hozzá a "REF =" CONTAINER "'' '' 'C-App-Carousel__Container' elemet a sablonban, majd add hozzá az alábbi részleteket az összetevő objektum tulajdonának. A "Ref" -ot könnyű hozzáférést biztosítani egy elemhez, amely ebben az esetben a tartály, így számolhatjuk, hogy hány gyermekelem (aka diák) van. A logika jelenléte egy "szerelt ()" funkcióban azt jelenti, hogy azután automatikusan fut, ha az összetevőt először rendezi.

 Szerelve () {
  this.slidetotal =
  Ez. $ Refs.container.children.hossz;
}

13. Számítsa ki a konténerszélességet

Az összetevőben hozzon létre egy új objektumtulajdonságot, az úgynevezett "számított" és belül, egy új funkció, az úgynevezett "konténerszélesség ()". Ezt használjuk, hogy kiszámítsa a karusszel tartály szélességét a "Slidetotal" szám alapján.

 Számítva: {
   konténerszélesség () {
      adja vissza ezt.Slidetotal * 100 + '%';
   }
} 

14. Hozzon létre módszereket

Ezután hozzon létre egy másik objektum tulajdonságot, az úgynevezett "módszerek", hogy tárolja a karusszel funkciókat. A "Gotoslide ()" az "ActiveSlideIndex" beállításának egyszerű módja a 11. lépésben, az "ISCONTROLACTORTACT ()" TRUE, ha a vezérlő indexe "ActiveSlideIndex" mérkőzések, míg a "NextSlide ()" és a "prevslide ()" egyszerűen folytatódik a diák.

 Módszerek: {
  gotoslide (slideindex) {
  Ez.activeLideIndex = slideindex;
  },
  ISControlactive (Controlindex) {
  Visszatérés ControlIndex - 1
  === this.activeSlideIndex;
  },
  NextSlide () {
  Ez.activeLideIndex === Ez.
  Slidetotal - 1? this.activeLideIndex
  = 0: this.activeLideIndex ++;
  },
  prevslide () {
  Ez.activeLideIndex === 0? ez.
  activeslideindex = this.slidetotal - 1
  : this.activeLideIndex--;
  }
} 

15. Számítsa ki a karusszel tartály pozícióját

A karusszel százalékos értéket használ a transzformációval: Translatex és a CSS animáció szimulálása a diavetítéshez. Adja hozzá az alábbi részleteket a "kiszámított" objektumhoz, így kiszámíthatjuk ezt az értéket.

 AktivesLidposition () {
  Visszatérés '-' + (100 / this.slidetotal)
  * this.activeLideIndex + '%';
} 

16. Az inline CSS összeállítása

Most már megvan az értékek, amelyek helyesen helyezkednek el a karusszel csúsztatartót, meg kell építeni a CSS-t, amelyeket hozzáadunk a "Style" attribútumhoz. Ezt a logikát egy másik funkcióként adjuk hozzá a "számított" objektumban.

 ContainerStye () {
  Visszatérés 'Width: $ {this.containerwidth};
  Átalakítás: fordítás ($ {ez
  .activeSlidposition}); `

17. Bindje a CSS-t

Adja hozzá az alábbi részleteket a "C-App-Carousel__Container" elemre a sablonban. Ez kötődik a visszaadott érték „containerStyle ()” az előző lépésben a „stílusa” attribútum a karusszel tartály, ami azt jelenti, hogy a CSS, és ezért annak pozícióját automatikusan frissül, amikor a dolgok változnak.

 V-BIND: Style = "ContainerStyle" 

18. Következő / Előző nyilak

Most hozzá kell adnunk a logikát a következő / előző nyilakra, hogy a 14. lépés szerinti helyes módszert úgy hívják, ha minden egyes nyíl rákattint. A "Prevslide ()" töredék a "C-App-icon-arrow-prev" elemre tartozik, míg a "NextSlide ()" a "C-App-Icon-Arrow-Next" elemre tartozik. A "V-ON" irányelv csak egyszerű módja az eseményhallgatóknak a Vue.js-ben, a "kattintás", hogy a DOM esemény, amit célozunk.

 // prev
V-on: Click.Native = "Prevslide ()"
// Következő
V-on: Click.Native = "NextSlide ()" 

19. Carousel vezérlők létrehozása

Hozzunk létre a vezérlőelemeket, és tegye meg őket a megfelelő dia megjelenítéséhez, ha rákattint. Adja hozzá az alábbi elemet a "C-App-Carousel__Controls" -ba. A „v-for irányelv” létrehozásához használt mennyiségben vezérlőelemek illő „slideTotal” változó, míg a „v-kötés” irányelv lehetővé teszi az „is-aktív” osztály csak akkor, ha a „isControlActive” módszert a 14. lépésben visszatér igaz. Végül, miután egy másik eseményt hallgatunk a "V-ON" segítségével, ha rákattintott, a vezérlés felhívja a "Gotoslide" módszert, és átadja az indexét, amely megfelel a megfelelő csúszda indexének.

 & lt; div v-for = "n a slidetotalban"
: KEY = "N" V-BIND: CLASS =
"{'is aktív": ISCONTROLACTICE (N)} "
osztály = "C-app-carousel__control"
V-on: Kattintson a = "GOTOSLIDE (N - 1)" & GT; & lt; / div & gt; 

20. Import alkatrészek

Most menjünk vissza az "app.vue" komponenshez, és importáljunk mindent. Csak a nyitó után & lt; script & gt; címke, importálja a ".vue" komponenst. Fájlok:

 Az AppCarousel importálása a '@ / Components / App-Carousel / App-Carousel'
Az AppCarouselslide importálása a "@ / Components / App-Carousel-Slide / App-Carousel-Slide" -ról 

Ezután módosítsa az "összetevők" objektumot, így hivatkozik az újonnan importált komponensekre.

 Komponensek: {
   AppButton,
   appcarousel,
   AppCarouselslide
} 

Végül, a & lt; style & gt; Tag, importálja az új SCSS-t a többi komponens importjával.

 @Import "/ alkatrészek / app-karusszel /
komponens.app-karusszel ";
@Import "/ komponensek / App-Carousel-Slide /
komponens.app-karusszel-csúszda "; 

21. Adjon hozzá körhintát és csúszdákat

Végül adjuk hozzá új karusszel komponenseinket és néhány diátát a fő alkalmazáshoz. Az "app.vue" -ban még mindig cserélje ki az "Építés alatt" az alábbi részletet. Mindegyik & lt; app-carousel-slide & gt; Az elem egyetlen dia. Adjunk hozzá annyi, amennyit csak akarsz, cserélje ki a szöveget vagy a képet kívánt esetben. Beleértve a "test-photo-01.jpg" -t a "Test-photo-05.jpg" értékre. Miután befejezte az összeállítást, mindent meg kell dolgozni. Huzzih!

& lt; app-carousel & gt;
  & lt; app-carousel-slide & gt;
  & lt; sablon slot = "Cím" & gt; a dia
  & lt; / sablon & gt;
  & lt; sablon slot = "szöveg" & gt;
  & lt; p & gt; ez egy karusszel csúszda. & lt; / p & gt;
  & lt; app-button & gt; menjünk & lt; / app-button & gt;
  & lt; / sablon & gt;
  & lt; img slot = "kép"
  SRC = "./ Eszközök / IMG / TEST-Photo-01.JPG"
  Alt = "Saját karusszel fotó" & gt;
  & lt; / app-karusszel-dia & gt;
& lt; / app-carousel & gt; 

22. rugalmasságot ad a körhinta számára

Most van egy munkás Vue.js Carousel, adjunk hozzá további funkcionalitást, így könnyen testreszabhatjuk a diavetítés időtartamát, időzítő tulajdonát, kijelentve, hogy a csúszkáknak automatikusan csúszdanak, és ha igen, milyen gyakran. Nyissa meg az "App-Carousel.Vue" -t, és adja hozzá a tulajdonságokat az alábbi táblázatban az összetevő objektumához.

 Props: {
  Áthelyezés: {
  Típus: String,
  Alapértelmezés: '0.5s'
  },
  Átmeneti: {
  Típus: String,
  Alapértelmezés: "Könnyű"
  }
} 

23. Módosítsa a konténereket ()

Az ilyen tulajdonságokhoz átadott értékeknek a 17. lépésben a karusszel inline CSS-jére kell menniük. Most módosítsuk a "ContainerStyle" számított funkciót, hogy megbizonyosodjunk arról, hogy ez megtörténik.

 ContainerStye () {
  Visszatérés "Szélesség: $ {this.containerwidth};
  Átalakítás:
  fordítás ($ {this.activeSlidposition});
  Átmeneti időzítés funkció:
  $ {this.transitiontiming};
  Átmeneti időtartam:
  $ {this.transitionduration}; `
} 

24. Adja meg az adatokat a karusszel tulajdonságaihoz

Az alábbi részletek szemléltetik, hogyan adjuk át az adatokat ezeknek az új tulajdonságoknak az & lt; App-Carousel & Gt; az "app.vue" elem. Hozzáadva, képesnek kell lennie arra, hogy átadja a kívánt értékeket. Például egy "3.0s" időtartam nagyon lassú csúszkát eredményezne!

 & lt; app-karusszel
Átmeneti időtartam = "0,25s"
Átmeneti időzítés = "könnyű-in-out" & gt; 

25. Auto-slide-kellékek hozzáadása

Az automatikus csúszdához két további objektumot kell hozzáadnunk az "app-carousel.vue" "kellékekhez". Az "Auto" vagy "TRUE" vagy "FALSE", amely megfelel, ha a karusszel továbbra is automatikusan csúszik. Az "AutoTIMing" az automatikus csúszdaindítás előtti időpontot vezérli, az alapértelmezett érték 5000 milliszekundum.

 Auto: {
  Típus: String,
  Alapértelmezés: "FALSE"
},
autotiming: {
  Típus: String,
  Alapértelmezés: 5000
} 

26. Indítsa el az automatikus csúszkát

Most meg kell kezdeni az automatikus csúszkát az összetevők terhelésére. A karusszel "szerelt ()" funkciójában a meglévő tartalom után ellenőrizze, hogy az "Auto" tulajdonság "True" -ra van-e. Ha igen, hozzon létre egy olyan intervallumot, amely a "NextSlide ()" módszert ismételten kiváltja, miután az "Autotiming" érték elhaladt.

 Ha (this.auto ==== "igaz") {
  ez.AULTOZVÁLIS = SETInTERVAL (() = & gt; {
  ez.Nextslide ();
  }, PARSEINT (ezAutotiming));
} 

27. Az automatikus diavetítés módosítása

Nyilvánvaló, hogy valamilyen módon szükségünk van arra, hogy a felhasználó letiltja az automatikus csúszkát, ha kifejezte a vágyat, hogy manuálisan működjenek a körhinta. Az első lépés ez egy új karusszel módszer, az úgynevezett "CancelAutoslide". Ez egyszerűen törli az előző lépésben létrehozott intervallumot.

 CancelAutoslide () {
   clearinterval (ezAutozzon);
} 

28. Tradger CancelAutoslide

Ha a felhasználó nyíl vagy vezérlőelemre kattint, ésszerű feltételezni, hogy manuálisan kívánják működtetni a karusszel, ezért hívjuk a "CancelAutoslide" módszert, ha ezek az elemek bármelyikét kattintanak. Ehhez egyszerűen add hozzá a "+ CancelAutoslide ()" minden egyes elemet "V-ON" irányelv. Lásd az alábbi részletet az alábbi "Előző" dia nyíl segítségével.

 V-on: Click.Native = "prevslide () + CancelAutoslide ()" 

29. Átadja az értékeket az automatikus csúszdákhoz

Végül, adjunk meg néhány értéket a létrehozott automatikus diavetítéshez. Vissza az "App.Vue" -ba, adja hozzá az alábbi részleteket az & lt; app-carousel & gt; elem, amely lehetővé teszi az automatikus csúszkát három másodpercenként.

 AUTO = "TRUE" AUTO-TIMING = "3000"

30. Befejezés A karusszel komponens

Mégsem a fejlesztési szerver, vagy nyisson meg egy új terminált, és fuss „run NPM építmények” hozhatja létre, gyártásra kész változata a Vue.js hajtott körhinta eleme a „dist” könyvtárba.

Ezt a cikket eredetileg a Creative Web Design magazin webdesigner 269-es kiadásában tették közzé. Itt vásároljon 269 kérdést vagy Iratkozzon fel itt a webdesignerre .

Webdesign esemény generál London 2018. szeptember 19-21-én való visszatérés, az iparág vezető hangszórók, a workshopok teljes napja és értékes hálózati lehetőségek - nem hagyja ki. Szerezd meg generál jegyet most .

Kapcsolódó cikkek:

• 7 Alapvető eszközök a mai webdesigner számára
• Hozzáad egy hibás hatás a webhelyére
• 6 Csodálatos "az oldalakról", hogy inspiráljanak