Luo joustava karuseelikomponentti

Vue.js on tullut harppauksiin äskettäin, tulossa kuudenneksi haarautuneimmaksi hankkeeksi tähän mennessä Github Kirjoitushetkellä jopa Facebookin omaa reaktiota. On turvallista sanoa, että se on nopeasti tulossa mainintamaan verkkokehitys ja luotettava go-to JavaScript Framework käytettäväksi hankkeissa.

Tässä opetusohjelmassa aiomme käyttää vue.js luoda yksinkertainen karuseelikomponentti. Tämä komponentti hyväksyy useita eri ominaisuuksia, joten voit vaihtaa joitain perusasetuksia, kuten siirtymänopeutta, siirtymätyyppiä ja onko karusellin tulisi automaattisesti siirtyä liukua.

Jos kaikki tämä kuulostaa liian hankalalta, a Verkkosivuston rakentaja Työkalu saattaa olla enemmän asia. Hyvää luoda monimutkaisempi sivusto? Tarvitset sivujen ylläpito Se voi selviytyä.

• Nopeuttaa suorituskykyä Vue.js

Aloittaminen, Lataa projektitiedostot täältä (Tallenna ne sisään pilvivarasto ) Ja avaa "Verkkosivusto" -hakemisto haluamallasi tekstineditorissa. Samaan aikaan terminaali, CD-levy "verkkosivustolle" ja suorita sitten NPM-asennus "hankkeiden asentamiseksi solmu.js-riippuvuudet. Lopuksi käynnistä "NPM RUN DEV" käynnistää kehityspalvelin niin, että voit tarkastella projektia selaimessa. Tyypillisesti tämä olisi "localhost: 8080".

01. Luo karusellin liukumäistä

Luo uusi hakemisto nimeltä "App-Carousel-Slide" ja siinä kaksi tiedostoa: "App-Caruseel-Slide.vue" ja "Component.App-Carousel-Slide.Scs". Nämä sisältävät ensimmäiset kaksi uutta VUE.JS-komponenttia, jotka luomme, jotka yhdessä käytettäessä luovat karusellikomponenttisi.

02. Lisää karuselli SLIDE SCSS

Kopioi Filesilo-paketin "/support-files/STP-02-SLIDE.SCS" sisällön "Component.app-carousel-slide.scs". Tämä on liukukomponentin SCS: t ja käyttää "Flex-Grow" -ominaisuutta varmistaaksesi, että jokainen liukumää laajenee täyttämään sen vanhemman elementin.

03. Luo liukukomponentti

Tyhjössä "App-CaruseLal-Slide.vu" -tiedosto, lisää alla oleva katkelma, jos haluat luoda VUE.JS-komponentin rakenne. Käytämme tätä perustana karusellin rakentamiseksi.

 & lt; template & gt; & lt; / template & gt;
& lt; skripti & gt;
Vie oletus {
  Nimi: App-Carousel-Slide '
}
& lt; / script & gt; 

04. Lisää karuselli-slide-kuvien mallilaite

Tyhjössä & lt; template & gt; Caruseel Slide, lisäämme div-elementin, joka edustaa liukumää sekä erityinen paikka, jota nimetään "kuva". Vuonna Vue.js, lähtökohtana voit yhdistää oman sisällön komponentin mallissa muokkaamatta sitä. Tässä tapauksessa niitä käytetään, jotta voimme myöhemmin siirtää kuvan dia-taustalle, joten lopputulos, kun lopulta käytettiin, näyttäisi "& lt; app-carusel-slide & gt; & lt; img src = '' alt = ' '& GT; & LT; / App-Carousel-Slide & Gt;'.

 & lt; div luokka = "C-App-Carusel-Slide" & GT;
  & lt; slot name = "kuva" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Lisää diatussäiliö

Kaikki, jotka jäävät liukukomponenttiin, on rakentaa tekstinsäiliö. Käytämme aukkoja uudelleen, yksi suuremmalle diaselle ja yksi säännölliselle tekstille. Käytämme myös Vue.js-direktiiviä nimeltä "V-IF", joka lisää logiikkaa, joka vain tekee tekstinsäiliöstä, jos ainakin yksi aikaväleistä siirretään sisältöön. Lisää tämä katkaisu C-App-Carousel-Slide ", juuri ennen" kuva "-paikkaa.

 & lt; div luokka = "C-App-Carousel-Slide__Text-lohko"
V-IF = "Tämä. $ Slots ['Title'] || $ Slots ['Text']" & gt;
  & lt; h1 class = "C-App-Carousel-Slide__Title"
  V-IF = "Tämä. $ Slotit ['otsikko']" & gt;
  & lt; slot name = "otsikko" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div luokka = "C-App-Carousel-Slide__Text"
  V-IF = "Tämä. $ Slotit ['Text']" & gt;
  & lt; slot name = "Teksti" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Luo karusellitiedostoja

Takaisin "SRC / komponentit" luo uusi hakemisto nimeltä "App-Carousel" ja sitten siinä kaksi uutta tiedostoa: "App-Caruseel.vues" ja "Component.app-karusell.Scs". Nämä pitävät toisesta kahdesta VUE.JS-komponenteista: itse karuselli.

07. Lisää karuselli CSS

Kopioi "/support-files/STP-07-SLIDE.SCS" sisältö tyhjään "Components.app-karusell.Scs". Tämä on tärkein karusellikomponentin SCS.

08. Luo karusellikomponentti

Seuraavaksi App-Carousel.vue ', aiomme rakentaa karusellikomponentin rakenteen. Tuomme "Appicon" -komponentin ja "nuolen" SVG myöhempää käyttöä varten karusellin seuraavissa ja aiemmissa kuvakkeissa. Nämä toimivat yhdessä SVG-Sprite-kuormaimen riippuvuuden muodostamiseksi perus SVG-kuvakejärjestelmän, joka toimii SVG: n symboleilla "ja sen" käyttö "-elementillä.

 & lt; template & gt; & lt; / template & gt;
& lt; skripti & gt;
Tuo silitys
'@ / Komponentit / App-Icon / App-Icon'
Tuo nuoli
'./../../asets/img/arrow.svg'
Vie oletus {
  Nimi: App-Carusel ",
  Komponentit: {
  applicon
  },
  tiedot () {
  palaa {
  nuoli
  }
  }
}
& lt; / script & gt; 

09. Rakenna karuselli malli

Aloitamme sisällön lisääminen tyhjälle mallipohjalle. Tärkein kiinnostava alue on "C-App-Caruselli__Container" -elementti, joka pian lasketaan leveys sen sisällä havaittujen diojen määrän perusteella. Sitten siirrät säiliön CSS-muunnos: Translatex ja siirtymät simuloimaan liukuliikkeen.

 & lt; div luokka = "C-App-Caruselli" & GT;
  & lt; div luokka = "C-App-Carousel__Wrapper" & GT;
  & lt; div luokka = "C-App-Carousel__Container" & GT;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Lisää karuseelin säätimet ja nuolet

Meidän on sitten lisättävä HTML Carousel Controls Container ja edelliset ja seuraavat nuolet; Jälkimmäinen käyttäen vaiheessa 8 tuotuja kuvakejärjestelmää ja SVG: tä. Lisää nämä C-App-Carusel__Wrapper -elementin jälkeen.

 & lt; app-icon class = "C-App-icon-arrow-prev C-App-Carousel__Arrow" Käytä = "nuoli" / & gt;
& lt; div luokka = "C-App-Carousel__Controls" & GT;
& lt; / div & gt;
& lt; app-icon class = "C-App-Icon-arrow-Seuraava C-App-Carousel__Arrow" Käytä = "nuoli" / & gt; 

11. Luo karusellitietokauppa ja lisää ominaisuudet

Aiomme lisätä kolme uutta kiinteistöä komponentin tietovarastoon: "SlideTotal" pitää diojen kokonaismäärän; "ActiveSlideIndex" tallentaa näkyvän dian indeksin niin, että sitä voidaan käyttää säiliön asennon laskemiseen; Kun Auto Pointserval tallentaa aikaväli-ajastimen, joka käynnistää automaattisen liukumuksen. Kaikki nämä asetetaan nollaksi, lukuun ottamatta "ActiveSlideIndex", jossa "0" -arvo osoittaa, että ensimmäisen dian pitäisi olla oletus dia.

 Tiedot () {
  palaa {
  nuoli,
  SlideTotal: Null,
  ActiveSlideIndex: 0,
  Auto Pointserval: Null
  }
} 

12. Laske SlideTotal

Lisää "Ref =" Container "" C-App-Carousel__Container "-elementtiin mallin" -elementtiin ja lisää sitten katkelman alla olevan komponenttien objektin ominaisuuden. "Ref" käytetään helpottamaan elementtiä, joka tässä tapauksessa on säiliö, jotta voimme luottaa, kuinka monta lapsellistä elementtiä (aka liukua) se on. Tämän logiikan läsnäolo "asennetussa ()" -toiminnolla se toimii automaattisesti, kun komponentti tehdään ensin.

 Asennettu () {
  tämä.slidetetotal =
  Tämä. $ Ref.Container.children.Length;
}

13. Laske säiliön leveys

Komponentissa luo uusi esineen ominaisuus nimeltä "Computer" ja sen sisällä, uusi toiminto nimeltä ContainerWidth () ". Käytämme tätä laskemaan karuseelisäiliön leveys "SlideTotal" -lukuun.

 laskettu: {
   konttileikkaus () {
      Palauta tämä.SLideTotal * 100 + '%';
   }
} 

14. Luo menetelmät

Seuraavaksi luo toinen esine omaisuus nimeltä "Menetelmät" tallentaaksesi karusellin toiminnot. "Gotoslide ()" on helppo tapa asettaa "ActiveSlideIndex" vaiheesta 11, "Iscontrolaktiivinen ()" palauttaa totta, kun kontrollin indeksi vastaa 'ActiveSlideIndex', kun taas "nextslide () ja" esikuva () "yksinkertaisesti kiertävät läpi dioja.

 Menetelmät: {
  gotoslide (slidedex) {
  tämä.activeslideIndex = SlidIndex;
  },
  Iscontrolaktiivinen (controlindex) {
  Paluu Controlindex - 1
  === this.activesLideIndex;
  },
  nextslide () {
  tämä.actItItlideIndex === Tämä.
  SlideTotal - 1? tämä.actItItlideIndex
  = 0: This.activesLidIDEX ++;
  },
  esikue () {
  tämä.actItItlideIndex === 0? Tämä.
  ActiveSlideIndex = this.sLideTotal - 1
  : Tämä.actItlideIndex--;
  }
} 

15. Laske karusellin säiliön sijainti

Karuste käyttää prosentuaalista arvoa muunnos: Translatex ja CSS-animaatio simuloimaan liukusiirtymistä. Lisää alla oleva selkänoji "Computer" -objektiin, jotta voimme laskea tämän arvon.

 ActiveSlideposition () {
  Paluu '-' + (100 / this.sLideTotal)
  * Tämä.activeslideindex + '%';
} 

16. Kosketa INLINE CSS

Nyt meillä on kaikki arvot, jotka sijoittavat Caruselli Slide Containin oikein, meidän on rakennettava CSS, jotka sitten lisäämme sen "tyyli" attribuuttiin. Lisäämme tämän logiikan toisen toiminnon "Computer" -objektissa.

 ContainerStyle () {
  Palauta "Leveys: $ {this.containerwidth};
  Muutos: Translatex ($ {tämä
  .: stakemitlideposition}); `

17. Sido CSS: tä

Lisää alla oleva kappale "C-App-Carousel__Container" -elementtiin malliin. Tämä sitoutuu "ContainerStyle ()" palautettuun arvoon edellisestä vaiheesta karusellin säiliön "tyyli" -määritykseen, mikä tarkoittaa, että sen CSS ja sen sijainti päivitetään automaattisesti, kun asiat muuttuvat.

 V-BIND: Style = "ContainerStyle" 

18. Kiinnitä seuraavat / edelliset nuolet

Meidän on nyt lisättävä logiikka seuraavalle / edelliselle nuolelle niin, että vaiheen 14 oikeaa menetelmää kutsutaan kun kukin vastaava nuoli napsautetaan. "Edellinen) kuuluu C-App-icon-arrow-prev" -elementtiin, kun taas "Nextslide ()" kuuluu C-App-icon-arrow-seuraavaan "elementtiin. "V-on" -direktiivi on vain helppo tapa perustaa tapahtuma kuuntelijat VUE.JS: ssä, "klikkaus" on DOM-tapahtuma, jota kohdistamme.

 // prev
v-on: click.native = "Preveslide ()"
// Seuraava
V-ON: Click.Native = "Nextslide ()" 

19. Luo karuseelin säätimet

Luodaan ohjauselementit ja tehdä niistä näyttävät vastaavan dia, kun napsautat. Lisää alla oleva elementti "C-App-Carusel__Controls". "V-for" -direktiiviä käytetään luomaan "SLIDETOTAL" -muuttujan, samalla kun "V-BIND" -direktiivi mahdollistaa "on aktiivinen" luokka vain silloin, kun vaiheessa 14 on "Iskontrolaktiivinen menetelmä, palauttaa totta. Lopuksi, luomme toisen tapahtuman kuuntelen "V-on", kun napsautat, ohjaus kutsuu "GOTOSLIDE" -menetelmää ja läpäisee indeksin, joka vastaa vastaavan dianindeksiä.

 & lt; div v-for = "n slidetotal"
: KEY = "N" V-BIND: luokka =
"{" on-aktiivinen ": Iscontrolaktiivinen (n)}"
Luokka = "C-APP-CAROUSEL__CONTROL"
V-ON: Klikkaa = "Gotoslide (n - 1)" & gt; & lt; / div & gt; 

20. Tuo komponentit

Let's nyt palaa huipputason "app.vue" -komponenttiin ja tuoda kaiken. Juuri aukon jälkeen & lt; skripti & gt; Tag, Tuo komponentti ".vu". tiedostot:

 Tuonti Appcarousel alkaen "@ / komponentit / App-Carusel / App-Carusel"
Tuo appcarouselslide alkaen "@ / komponentit / App-Carusel-Slide / App-Carousel-Slide" 

Seuraavaksi muuttavat "komponenttien" esine, jotta se viittaa siihen, että nämä äskettäin tuodut komponentit.

 Komponentit: {
   AppButton,
   Appcarousel,
   Appcarouselslide
} 

Lopuksi, & lt; tyyli & gt; Tunniste, tuo uusia SCS: itämme muun osan tuonnin kanssa.

 @IMPORT "/ Komponentit / App-Carusel /
komponentti.app-karuselli ";
@IMPORT "/ Komponentit / App-Carousel-Slide /
Component.app-karuseel-slide "; 

21. Lisää karuselli ja diat

Lopuksi lisätään uusi karuseelikomponentti ja jotkut liukuvat pääohjelmaan. Silti "App.vue", korvaa 'alle rakenteilla' alla katkennut. Jokainen & lt; app-carousel-slide & gt; elementti edustaa yhtä liukua. Lisää niin monta kuin haluat, korvaamalla teksti tai kuva haluttaessa. Mukana ovat "testi-kuva-01.jpg" testi-kuva-05.jpg ". Kun se on valmis koottu, kaikki pitäisi nyt toimia. Huzzah!

& lt; app-carousel & gt;
  & lt; app-carousel-slide & gt;
  & lt; Template Slot = "otsikko" & gt; minun dia
  & lt; / template & gt;
  & lt; Template Slot = "Text" & GT;
  & lt; p & gt; tämä on karuselli slide. & lt; / p & gt;
  & lt; app-button & gt; Mennään & lt; / app-painike & gt;
  & lt; / template & gt;
  & lt; img slot = "kuva"
  SRC = "./ Varo / IMG / Test-Photo-01.jpg"
  Alt = "My Carousel Photo" & GT;
  & lt; / app-carousel-slide & gt;
& lt; / app-carousel & gt; 

22. Lisää joustavuus karuselliin

Nyt meillä on työskentely Vue.js karuselli, lisätään lisää toimintoja, jotta voimme helposti muokata liukusiirtymän kestoa, sen ajoitusominaisuutta, joka ilmoittaa, jos dioja pitäisi liukua ja jos niin usein. Avaa APP-CAROUSEL.VEE 'ja lisää ominaisuudet alla olevaan päänsiirtoon komponenttien esineeseen.

 rekvisiitta: {
  Siirtyminen: {
  Tyyppi: merkkijono,
  Oletusarvo: '0,5s'
  },
  Transitiointi: {
  Tyyppi: merkkijono,
  Oletus: "helppous"
  }
} 

23. Muuta konttitylejä ()

Näille ominaisuuksille siirretyt arvot pitäisi tehdä karusellin sisäisen CSS: n takaisin vaiheessa 17. Nyt muutetaan ContainerStyle-laskentatoiminnon varmistamaan, että tämä tapahtuu.

 ContainerStyle () {
  Palauta `Leveys: $ {this.containerwidth};
  muuttaa:
  Translatex ($ {this.activeslideposition});
  Siirtyminen-ajoitus-toiminto:
  $ {this.TransitionTiming};
  Siirtyminen:
  $ {this.Transionduration}; `
} 

24. Siirrä tiedot karusellin ominaisuuksiin

Seuraavassa selkärankalla havainnollistaa, miten voimme siirtää tietoja näihin uusiin ominaisuuksiin & lt; App-Caruselli & GT; elementti "app.vue". Lisätty, sinun pitäisi pystyä välittämään mitä arvot haluat. Esimerkiksi "3.0s" kesto johtaisi hyvin hitaasti liukuulosuunnitteluun!

 & lt; app-karuselli
Siirtyminen-kesto = "0,25s"
Siirtyminen-ajoitus = "helppokäyttöinen" & gt; 

25. Automaattinen liukuportaa

Auto-dialle meidän on lisättävä kaksi ylimääräistä esinettä 'rekvisiitta "App-Caruseel.vue". "Auto" on joko "TRUE" tai "FALSE", joka vastaa, jos karusellin pitäisi jatkaa automaattisesti. "Autotimointi" ohjaa aikaa ennen automaattista liukumäistä laukaisusta, jonka oletusarvo on 5000 millisekuntia.

 Auto: {
  Tyyppi: merkkijono,
  Oletus: "FALSE"
},
AutoTiming: {
  Tyyppi: merkkijono,
  Oletusarvo: 5000
} 

26. Aloita automaattinen liukumäki

Nyt meidän on käynnistettävä automaattinen liukumäki komponenttien kuormituksella. Carusellin "asennetussa () -toiminnolla nykyisen sisällön jälkeen tarkista, onko" Auto "-ominaisuus asetettu" TRUE ". Jos näin on, luo aikaväli, joka laukaisee "Nextslide () -menetelmän toistuvasti, kun" autoTiming "-arvo on kulunut.

 Jos (tämä.Auto === "totta") {
  This.AuteValal = SetItinterval (() = & gt; {
  tämä.Nextslide ();
  }, parseitsi (this.Autotiming));
} 

27. Peruuta Automaattinen diamenetelmä

On selvää, että tarvitsemme jotakin tapaa poistaa automaattitaulun, jos he ovat ilmaisseet halun käyttää karuselli manuaalisesti. Ensimmäinen askel kohti tätä on uusi karuselli-menetelmä, jota kutsutaan "cransetutoslidiksi". Tämä yksinkertaisesti peruuttaa edellisessä vaiheessa luotu aika.

 CANCELAUTOSLIDE () {
   ClearInterval (this.Autointerval);
} 

28. TRIGGER CANCELAUTOSLIDE

Jos käyttäjä napsauttaa nuolen tai ohjauselementin, on järkevää olettaa, että he haluavat käyttää karusellin manuaalisesti, joten soitamme "Cransetutoslidin menetelmä, jos jokin näistä elementeistä napsautetaan. Voit tehdä tämän yksinkertaisesti lisäämällä "+ cransetutoslide ()" jokaiseen elementtiin "V-on" -direktiiviin. Katso alla olevaa katkelmia esimerkkinä käyttämällä edellistä liukukaulua.

 V-ON: Click.Native = "Preveslide () + CANCELAUTOSLIDE ()" 

29. Siirrä arvot automaattiseen liukuportaan

Lopuksi siirretään joitakin arvoja luotuihin automaattiseen liukumaisiin ominaisuuksiin. Takaisin "App.vue", lisää alla oleva kappalee & lt; app-carousel & gt; Elementti ottaa automaattisen liukumisen mahdollistaa kolmen sekunnin välein.

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

30. Lopeta karusellikomponentin rakentaminen

Peruuta kehityspalvelin tai avaa uusi päätelaite -ikkuna ja suorita "NPM Run Build" luodaksesi valikoima, tuotantovalmis versiosi Vue.js Powered Carousel Component -ohjelmistosta "DIST" -hakemistossa.

Tämä artikkeli julkaistiin alun perin Banges 269 Creative Web Design Magazine Web Designer. Osta numero 269 täällä tai Tilaa Web-suunnittelija tähän .

Web Design Tapahtuma Tuottaa Lontoo Palauttaa 19.-21. Syyskuuta 2018, joka tarjoaa pakatun aikataulun teollisuuden johtavista puhujista, koko päivän työpajoista ja arvokkaista verkostoitumismahdollisuuksista - älä missaa sitä. Saada Tuottaa lippu nyt .

Aiheeseen liittyvät artikkelit:

• 7 Keskeiset työkalut nykypäivän web-suunnittelijalle
• Lisää glitch vaikutus verkkosivustoosi
• 6 hämmästyttävää "sivuista innostaa sinua