Opret en fleksibel karruselkomponent

Vue.js er kommet på spring og grænser for nylig, bliver det sjette mest forked projekt hidtil på Github. På tidspunktet for skrivningen, selv forud for Facebook's egne reaktejs. Det er sikkert at sige, at det er hurtigt at blive en grundpille i web-udvikling , og en pålidelig go-to JavaScript Framework. til brug i projekter.

I denne vejledning skal vi bruge vue.js til at skabe en simpel karruselkomponent. Denne komponent accepterer en række forskellige egenskaber, der gør det muligt for dig at tilpasse nogle grundlæggende indstillinger som overgangshastighed, overgangstype, og om karrusellen automatisk skal overgangsglas.

Hvis alt dette lyder for vanskeligt, en Website Builder. Værktøjet kan være mere dine ting. Glad for at skabe et mere komplekst websted? Du mangler Web Hosting. det kan klare.

• Fremskynde ydeevne med vue.js

For at komme i gang, Download projektfilerne her (og gem dem i Sky lagring ) og Åbn "Website-Template" -mappen i din foretrukne tekstredigeringsprogram. I mellemtiden i terminal, cd i 'website-skabelon' og derefter køre 'NPM Install' for at installere projekterne node.js afhængigheder. Endelig skal du køre 'NPM Run Dev' for at starte en udviklingsserver, så du kan se dit projekt i browseren. Det ville typisk være på 'localhost: 8080'.

01. Opret karrusell diasfiler

I 'SRC / Components', oprette en ny mappe kaldet 'App-Carousel-Slide' og i det to filer: 'App-Carousel-Slide.Vue' og 'Component.App-Carousel-Slide.scss'. Disse vil indeholde de første af to nye vue.js komponenter, som vi vil skabe, som når de bruges sammen, vil skabe vores karruselkomponent.

02. Tilføj karrusel dias scss

Fra Filesilo-pakken skal du kopiere indholdet af '/support-files/step-02-slide.scss' i 'Component.App-Carousel-Slide.scss'. Dette er SCSS til diaskomponenten og bruger 'Flex-Grow' ejendommen for at sikre, at hvert dias udvider for at fylde sit forældreelement.

03. Opret diasekomponenten

I den tomme 'app-karrusel-slide.vue' -fil, skal du tilføje snippet nedenfor for at skabe strukturen af ​​vue.js-komponenten. Vi bruger dette som grundlag for at bygge karrusellyset.

 & lt; skabelon & gt; & lt; / skabelon & gt;
& lt; script & gt;
Eksport standard {
  Navn: 'App-Carousel-Slide'
}
& lt; / script & gt; 

04. Tilføj en skabelon slot til karrusell diasbillederne

I den tomme & lt; skabelon & gt; Element af karrusellyset, vi tilføjer et 'div' element for at repræsentere diaset, sammen med et specielt slot element, som vi vil nævne 'image'. I Vue.js giver slots dig mulighed for at interweave dit eget indhold med komponentens skabelon uden at redigere det. I dette tilfælde bliver de brugt, så vi senere kan passere billedet til glideskiftet, så slutresultatet, når det i sidste ende bruges, ville se ud som "app-karrussel-slide & gt; & lt; img src = '' alt = ' '& gt; & lt; / app-karrusel-slide & gt;'.

 & lt; div class = "c-app-karrusel-slide" & gt;
  & lt; slot navn = "billede" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Tilføj dias tekstbeholderen

Alt, der forbliver for glidekomponenten, er at opbygge tekstbeholderen. Vi vil bruge slots igen, en til den større dias titel og en til almindelig tekst. Vi vil også bruge et vue.js-direktiv kaldet 'V-IF' for at tilføje Logic, som kun gør tekstbeholderen, hvis mindst en af ​​slots er bestået indhold. Tilføj denne uddrag i 'C-app-karrusel-slide', lige før 'Image' slottet.

 & lt; div class = "c-app-karrusel-slide__text-blok"
v-IF = "Dette. $ Slots ['titel'] || dette. $ Slots ['Text']" & GT;
  & lt; h1 klasse = "c-app-karrusel-slide__title"
  V-IF = "Dette. $ Slots ['Titel']" & GT;
  & lt; slot navn = "titel" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-karrusel-slide__text"
  V-IF = "Dette. $ Slots ['Tekst']" & GT;
  & lt; slot navn = "tekst" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Opret karruselfiler

Tilbage i 'SRC / Components', opret en ny mappe kaldet 'App-Carousel' og derefter inden for den to nye filer: 'App-Carousel.Vue' og 'Component.App-Carousel.Scss'. Disse vil holde den anden af ​​de to vue.js komponenter: Hovedkarrusellen selv.

07. Tilføj karrusel CSS

Kopier indholdet af '/support-files/step-07-slide.scss' i den tomme 'komponent.app-Carousel.scss'. Dette er SCSS for den vigtigste karruselkomponent.

08. Opret karruselkomponent

Næste i 'App-Carousel.Vue', vi vil opbygge strukturen af ​​karruselkomponenten. Vi importerer 'Appicon' -komponenten og 'pilen' SVG til senere brug i karrusellens næste og tidligere ikoner. Disse arbejder sammen med 'SVG-sprite-loader' afhængigheden for at generere et grundlæggende SVG-ikon-system, som virker ved hjælp af SVG 'symboler' og dets 'brug' element.

 & lt; skabelon & gt; & lt; / skabelon & gt;
& lt; script & gt;
Import Appicon fra.
'@ / komponenter / app-ikon / app-ikon'
Importpil fra
'./../../assetter/img/Arrow.svg'
Eksport standard {
  Navn: 'App-Carousel',
  Komponenter: {
  Appicon.
  },
  data() {
  Vend tilbage {
  pil
  }
  }
}
& lt; / script & gt; 

09. Byg karrusellskabelonen

Lad os begynde at tilføje indhold til det tomme skabelonelement. Det vigtigste område af interesse her er 'C-app-Carousel__Container' -elementet, som vi snart vil beregne en bredde for baseret på antallet af dias, der findes i det. Vi flytter derefter beholderen ved hjælp af CSS-transformation: translationX og overgange for at simulere glidebevægelse.

 & lt; div class = "c-app-karrusel" & gt;
  & lt; div class = "c-app-karrussel__wrapper" & gt;
  & lt; div class = "c-app-karrussel__container" & gt;
  & lt; slot & gt; / lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Tilføj karruselkontroller og pile

Vi skal derefter tilføje HTML til Carousel Controls Container og de forrige og næste pile; Sidstnævnte bruger ikonet og SVG importeret i trin 8. Tilføj disse efter elementet 'C-app-Carousel__Wrapper'.

 & lt; app-ikon klasse = "c-app-ikon-pil-prev c-app-karrusel__Arrow" brug = "pil" / & gt;
& lt; div class = "c-app-karrusel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-ikon-arrow-næste c-app-karrussel__Arrow" brug = "pil" / & gt; 

11. Opret Carousel Data Store og tilføj egenskaber

Vi tilføjer tre nye ejendomme til komponentens datalager: 'Slidetotal' vil holde det samlede antal dias; 'ActivesLideindex' registrerer indekset for det synlige dias, så det kan bruges til at beregne beholderens position; Mens AutoInterval registrerer intervallet Timer, som vil udløse en automatisk diasovergang. Alle disse er indstillet til NULL, med undtagelse af 'ActiveSloLeIndex', hvor '0'-værdien angiver, at det første dias skal være standard dias.

 Data () {
  Vend tilbage {
  pil,
  Slidetotal: null,
  ActiveSlideIndex: 0,
  Autointerval: null.
  }
} 

12. Beregn Slidetotal.

Tilføj 'Ref = "Container"' til 'C-app-Carousel__Container' -elementet i skabelonen og tilføj derefter udgangen nedenfor som en egenskab af selve komponentobjektet. 'Ref' bruges til at give nem adgang til et element, som i dette tilfælde er beholderen, så vi kan tælle, hvor mange børnelementer (aka dias) det har. Tilstedeværelsen af ​​denne logik i en "monteret ()" -funktion betyder, at den derefter kører automatisk, når komponenten først udføres.

 monteret () {
  dette.Slidetotal =
  Dette. $ Refs.Container.Children.Længde;
}

13. Beregn containerbredde

I komponenten skal du oprette en ny objektegenskab kaldet 'computed' og inden for den, en ny funktion kaldet 'containerwidth ()'. Vi bruger dette til at beregne bredden af ​​karruselbeholderen baseret på 'Slidetotal' figuren.

 COMPUTED: {
   containerwidth () {
      returnere dette.Slidetotal * 100 + '%';
   }
} 

14. Opret metoder

Dernæst oprette en anden objektegenskab kaldet 'Methods' for at gemme vores karrusels funktioner. 'Gotoslide ()' er en nem måde at indstille 'ActivesLideIndex' fra trin 11, 'ISControlActive ()' vender tilbage, når en kontrolindeks matcher 'ActivesLideindex', mens 'NextSlide ()' og 'Prevslide ()' simpelthen vil cykle igennem diasene.

 Metoder: {
  gotoslide (slideindex) {
  this.activeslideindex = slideindex;
  },
  iscontrolActive (ControlIndex) {
  Return ControlIndex - 1
  === This.ActivesLideIndex;
  },
  nextsslide () {
  this.activeslideindex === dette.
  Slidetotal - 1? this.activeslideindex.
  = 0: this.activeslideindex ++;
  },
  prevslide () {
  this.activeslideindex === 0? det her.
  ACTIVESLIDEINDEX = This.Slidetotal - 1
  : This.activesLideIndex--;
  }
} 

15. Beregn karrusellens beholderposition

Karrusellen bruger en procentværdi med transformation: translationX og CSS animation for at simulere diasovergang. Tilføj nedenstående snippet til 'beregnet' objekt, så vi kan beregne denne værdi.

 ACTIVESLOPPOSITION () {
  returnere '-' + (100 / this.slidetotal)
  * denne.activeslideindex + '%';
} 

16. Komponere inline CSS

Nu har vi alle værdier til korrekt placering af karrusellysbeholderen, vi skal konstruere CSS, som vi derefter tilføjer til sin 'stil' attribut. Vi tilføjer denne logik som en anden funktion i den 'computer' objekt.

 Containersyle () {
  Return 'Bredde: $ {this.containerwidth};
  Transform: TranslateX ($ {dette
  .ActiveSLOVEPOSITION}); `

17. Bind inline CSS

Tilføj nedenstående snippet til 'C-app-Carousel__Container' -elementet i skabelonen. Dette vil binde den returnerede værdi af 'Containersyle ()' fra det foregående trin til 'Style' -attributten af ​​karruselbeholderen, hvilket betyder, at dens CSS og derfor dens position automatisk vil blive opdateret, når tingene ændres.

 V-bind: Style = "Containersyle" 

18. Tilslut næste / forrige pile

Vi skal nu tilføje logik til de næste / forrige pile, så den korrekte metode fra trin 14 kaldes, når hver respektive pil klikkes. 'Prevslide ()' Snippet tilhører 'C-App-Icon-Pil-Prev' -elementet, mens 'NextSlide ()' tilhører 'C-App-Icon-Arrow-Next' -elementet. Direktivet 'V-On' er bare en nem måde at oprette begivenhedslytter i Vue.js, med 'klik' som DOM-begivenheden, som vi målretter mod.

 // Forrige
V-ON: Click.Native = "Prevslide ()"
// Næste
V-ON: klik.native = "NextsLide ()" 

19. Generer karruselkontrol

Lad os generere kontrolelementerne og få dem til at vise det tilsvarende dias, når den klikkes. Tilføj nedenstående element i 'C-App-Carousel__Controls'. Direktivet 'V-til' bruges til at skabe en mængde kontrolelementer, der matcher den "slidetotiske" -variabel, mens 'V-BIND-direktivet kun muliggør' IS-ACTIVE '-klassen, når "ISControlActive" -metoden fra trin 14 returneres sand. Endelig skaber vi en anden begivenhedslytter gennem 'V-ON', så ved klikket kalder kontrollen 'Gotoslide' -metoden og passerer sit indeks, som skal matche indekset for tilsvarende dias.

 & lt; div v-for = "n i slidetotal"
: Key = "n" v-bind: klasse =
"{'er-aktivt': ISControlActive (n)}"
klasse = "c-app-karrusel__control"
V-ON: klik = "Gotoslide (n - 1)" & gt; / lt; / div & gt; 

20. Importkomponenter

Lad os nu gå tilbage til toppen 'app.vue' komponent og importere alt. Lige efter åbningen & lt; script & gt; Tag, importer komponenten '.Vue'. Filer:

 Import AppCarousel fra '@ / Components / App-Carousel / App-Carousel'
Import AppCarousELSLide fra '@ / komponenter / app-karrusel-slide / app-karrusel-slide' 

Dernæst ændrer 'Komponentens objekt, så det refererer til disse nyligt importerede komponenter.

 Komponenter: {
   AppButton,
   AppCarousel,
   AppCarousELSLide.
} 

Endelig i & lt; stil & gt; Tag, importer vores nye SCS'er med resten af ​​komponentimporten.

 @import "/ komponenter / app-karrusel /
komponent.app-karrusel ";
@import "/ komponenter / app-karrusel-slide /
komponent.app-karrusel-slide "; 

21. Tilføj karrusel og dias

Endelig lad os tilføje vores nye karruselkomponent og nogle dias til hovedappen. Stadig i 'App.Vue', erstatt den 'underkonstruktion' med snippet nedenfor. Hver & lt; app-karrusel-slide & gt; element repræsenterer et enkelt dias. Tilføj så mange som du kan lide, udskiftning af teksten eller billedet, hvor det ønskes. Inkluderet er 'test-photo-01.jpg' til 'test-photo-05.jpg'. Når det er færdigt at kompilere, skal alt nu fungere. Huzzah!

& lt; app-karrusel & gt;
  & lt; app-karrusel-slide & gt;
  & lt; skabelon slot = "titel" & gt; mit dias
  & lt; / skabelon & gt;
  & lt; skabelon slot = "tekst" & gt;
  & lt; p & gt; dette er et karrusel dias. & lt; / p & gt;
  & lt; app-knap & gt; lad os gå og lt; / app-knap & gt;
  & lt; / skabelon & gt;
  & lt; img slot = "billede"
  src = "./ aktiver / img / test-photo-01.jpg"
  alt = "My Carousel Photo" & GT;
  & lt; / app-karrusel-slide & gt;
& lt; / app-karrusel & gt; 

22. Tilføj fleksibilitet til karrusellen

Nu har vi en fungerende vue.js karrusel, lad os tilføje nogle yderligere funktionaliteter, så vi nemt kan tilpasse varigheden af ​​diasovergangen, dens timing ejendom, der erklærer, om dias skal auto-slide, og i bekræftende fald, hvor ofte. Genåbne 'app-carousel.Vue' og tilføj egenskaberne i uddraget nedenfor til komponentobjektet.

 Props: {
  Overgang: {
  Type: String,
  Standard: '0.5s'
  },
  Overgang: {
  Type: String,
  Standard: 'lethed'
  }
} 

23. Ændre containerstyle ()

Værdierne, der er gået til disse egenskaber, skal gøre deres vej til karrusellens inline CSS fra bagsiden i trin 17. Lad os nu ændre den 'Containersyle' beregningsfunktion for at sikre, at dette sker.

 Containersyle () {
  Return `Bredde: $ {this.containerwidth};
  Transform:
  translationx ($ {this.activesLidePosition});
  Overgangstimeringsfunktion:
  $ {this.TransitionTiming};
  Overgangsvarighed:
  $ {this.transitionduration}; `
} 

24. Pass data til karruselegenskaberne

Nedenstående snippet illustrerer, hvordan vi ville passere data til disse nye egenskaber til & lt; app-karrusel & gt; element i 'app.vue'. Når du har tilføjet, skal du være i stand til at videregive de værdier, du ønsker. For eksempel vil en "3,0s" varighed resultere i en meget langsom diasovergang!

 & lt; app-karrusel
Overgangsvarighed = "0,25s"
Overgangstimering = "Easy-in-out" & GT; 

25. Tilføjelse af auto-slide rekvisitter

For Auto-Slide skal vi tilføje to yderligere objekter til 'rekvisitter' i 'App-Carousel.Vue'. 'Auto' er enten 'TRUE' eller 'FALSE', hvilket svarer til, hvis karrusellen fortsat skal fortsætte med automatisk dias. 'Autotiming' styrer tiden før auto-slide-triggere, hvor standardværdien er 5000 millisekunder.

 AUTO: {
  Type: String,
  Standard: 'FALSE'
},
Autotiming: {
  Type: String,
  Standard: 5000.
} 

26. Start Auto-Slide

Nu skal vi starte Auto-Slide på komponentbelastning. I Carousels 'monteret ()' funktion, efter det eksisterende indhold, skal du kontrollere, om 'Auto' -ejendommen er indstillet til 'TRUE'. Hvis det er tilfældet, skal du oprette et interval, der udløser "NextsLide ()" -metoden gentagne gange, når 'autotiming'-værdien er gået.

 hvis (this.auto === 'true') {
  denne.autointerval = setinterval (() = & gt; {
  this.nextsslide ();
  }, parseint (this.autotiming));
} 

27. Annuller Auto-Slide Method

Vi har naturligvis brug for en eller anden måde for brugeren at deaktivere Auto-Slide, hvis de har udtrykt ønske om at drive karrusellen manuelt. Det første skridt i retning af dette er en ny karruselmetode kaldet 'Cancelautoslide'. Dette vil blot annullere det interval, der er oprettet i det foregående trin.

 Cancelautoslide () {
   clearinterval (this.autointerval);
} 

28. Trigger Cancelautoslide.

Hvis brugeren klikker på en pil eller kontrolelement, er det rimeligt at antage, at de ønsker at betjene karrusellen manuelt, så lad os kalde 'Cancelautoslide' -metoden, hvis nogen af ​​disse elementer klikkes. For at gøre dette skal du blot tilføje '+ Cancelautoslide ()' til hvert elements V-On '-direktiv. Se uddraget nedenfor for et eksempel ved hjælp af "tidligere" diaspilen.

 V-ON: Click.Native = "Prevslide () + Cancelautoslide ()" 

29. Pass værdier til auto-slide rekvisitterne

Endelig lad os videregive nogle værdier til de automatiske slidegenskaber, vi har oprettet. Tilbage i 'App.Vue', tilføj nedenstående snippet til & lt; App-Carousel & GT; element for at aktivere et automatisk dias hvert tredje sekund.

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

30. Afslut opbygningen af ​​karruselkomponenten

Annuller udviklingsserveren, eller åbn et nyt terminalvindue, og kør 'NPM Run Build' for at oprette en kompileret, produktionsklar version af din vue.js drevet karruselkomponent i 'Dist' mappen.

Denne artikel blev oprindeligt offentliggjort i udstedelse 269 af Creative Web Design Magazine Web Designer. Køb problem 269 her eller Abonner på Web Designer her .

Web Design Event. frembringe London Returnerer den 19.-29. September 2018, der tilbyder en pakket plan for industriel førende højttalere, en hel dag med workshops og værdifulde netværksmuligheder - Gå ikke glip af det. Få din frembringe billet nu .

Relaterede artikler:

• 7 Væsentlige værktøjer til dagens webdesigner
• Tilføj en glitch effekt til dit websted
• 6 fantastiske 'om' sider at inspirere dig