Lag en fleksibel karusellkomponent

Sep 13, 2025
hvordan
Vue.js carousel component
[1. 3]

Vue.js har kommet på hopp og grenser nylig, blir det sjette mest forkedprosjektet så langt på GitHub. På tidspunktet for skriving, selv foran Facebooks egne reactjs. Det er trygt å si at det raskt blir en mainstay i webutvikling , og en pålitelig go-to Javascript-rammeverk for bruk i prosjekter.

I denne opplæringen skal vi bruke vue.js for å skape en enkel karusellkomponent. Denne komponenten vil godta en rekke forskjellige egenskaper, slik at du kan tweak noen grunnleggende innstillinger som overgangshastighet, overgangstype og om karusellen automatisk bør overgå lysbilder.

Hvis alt dette høres for vanskelig, en Nettstedbygger Verktøyet kan være mer din ting. Glad for å skape et mer komplekst nettsted? Du trenger Web Hosting. som kan takle.

  • Fremskynde ytelse med vue.js

Å komme i gang, Last ned prosjektfilene her (og lagre dem i skylagring ) og åpne katalogen 'Website-Template' i din foretrukne tekstredigerer. I mellomtiden i terminalen, CD i 'Website-Template' og deretter kjøre 'NPM Installer' for å installere prosjektene node.js avhengigheter. Endelig kjører NPM Run Dev 'for å starte en utviklingsserver slik at du kan se prosjektet i nettleseren. Vanligvis ville dette være på 'Localhost: 8080'.

01. Opprett karusell lysbilder

I 'SRC / Components', opprett en ny katalog kalt 'App-Carousel-Slide' og i den to filer: 'App-Carousel-Slide.Vue' og 'Component.App-Carousel-Slide.Scss'. Disse vil inneholde den første av to nye Vue.js-komponentene som vi vil skape, som når de brukes sammen, vil skape vår karusellkomponent.

02. Legg til karusell Slide SCSS

Fra filsilo-pakken, kopier innholdet i '/support-files/step-02-slide.scss' i 'Component.app-carousel-Slide.Scss'. Dette er SCSS for glidekomponenten, og bruker "flex-grow" -boligen for å sikre at hvert lysbilde ekspanderer for å fylle sitt forelderelement.

03. Lag glidekomponenten

I den tomme "APP-CAROUSEL-SLIDE.VUE" -filen, legg til koden nedenfor for å lage strukturen til VUE.JS-komponenten. Vi bruker dette som grunnlag for å bygge karusellens lysbilde. 

 & lt; mall & gt; & lt; / mal & gt;
& lt; script & gt;
Eksporter standard {
  Navn: 'App-carousel-Slide'
}
& lt; / script & gt;

04. Legg til et malespor for karusellens lysbilde

I det tomme & lt; mal & gt; Element i karusellens lysbilde, legger vi til et "DIV" -element for å representere lysbildet, sammen med et spesielt slotelement som vi vil nevne "Image". I Vue.js, slots gjør at du kan blande ditt eget innhold med komponentens mal uten å redigere den. I dette tilfellet blir de brukt slik at vi senere kan passere bildet for lysbildebakgrunnen, slik at sluttresultatet, når det til slutt brukes, ville se ut som "" APP-CAROUSEL-SLIDE & GT "ALT =" '& gt; & lt; / app-carousel-slide & gt;'. 

 & lt; div class = "c-app-carousel-slide" & gt;
  & lt; slot navn = "bilde" & gt; & lt; / slot & gt;
& lt; / div & gt;

Vue.js carousel component

Vue.js-teamet har nylig gitt ut en stilguide for rammen. Dette er fullt av nyttige eksempler, regler og anbefalinger som hver vue.js utvikler bør sjekke ut

05. Legg til lysbildebeholderen

Alt som gjenstår for lysbildekomponenten, er å bygge tekstbeholderen. Vi vil bruke Slots igjen, en for den større lysbildet tittelen og en for vanlig tekst. Vi vil også bruke et vue.js-direktiv som kalles 'v-hvis' for å legge til logikk, som bare gjør tekstbeholderen hvis minst en av sporene er bestått innhold. Legg denne koden i 'C-App-Carousel-Slide', like før 'Image' -sporet. 

 & lt; div class = "c-app-carousel-slide__Text-blokk"
V-IF = "Dette. $ Slots ['Tittel'] || Dette. $ Slots ['Text']" & GT;
  & lt; h1 class = "c-app-carousel-slide__title"
  v-hvis = "dette. $ slots ['tittel']" & gt;
  & lt; slot navn = "tittel" & gt; & lt; / slot & gt;
  lt; / h1 & gt;
  & lt; Div Class = "C-App-Carousel-Slide__Text"
  v-hvis = "dette. $ slots ['tekst']" & gt;
  & lt; slot navn = "tekst" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Lag karusellfiler

Tilbake i 'SRC / Komponenter' Opprett en ny katalog kalt 'App-Carousel' og deretter i det to nye filer: 'App-carousel.Vue' og 'Component.app-carousel.Scss'. Disse vil holde den andre av de to vue.js-komponentene: den viktigste karusellen selv.

Vue.js carousel component

Stilhåndboken deles opp i fire seksjoner, og gir regler som anses som viktige, sterkt anbefalt, anbefalt, og bruk med forsiktighet. Finn ut mer på vuejs.org/v2/style-guide.

07. Legg til karusell CSS

Kopier innholdet i '/support-files/step-07-slide.scss' i den tomme 'komponent.app-carousel.scss'. Dette er SCSS for hovedkaruselkomponenten.

08. Lag karusellkomponent

Neste i 'App-Carousel.Vue', vi skal bygge strukturen til karusellkomponenten. Vi importerer "Applicon" -komponenten og "pilen" SVG for senere bruk i karusellens neste og forrige ikoner. Disse fungerer sammen med 'SVG-SVRITE-LOADER' -avhengigheten for å generere et grunnleggende SVG-ikon system, som fungerer med SVG 'symboler' og dens bruk 'Element. 

 & lt; mall & gt; & lt; / mal & gt;
& lt; script & gt;
Importer AppIcon fra..
'@ / komponenter / app-ikon / app-ikon'
Importer arrow fra
'./../../assets/img/arrow.svg'
Eksporter standard {
  Navn: 'App-carousel',
  Komponenter: {
  appicon.
  },
  data () {
  komme tilbake {
  pil
  }
  }
}
& lt; / script & gt;

09. Bygg karusellmalen

La oss begynne å legge til innhold i det tomme malelementet. Hovedområdet av interesse her er "C-APP-CAROUSEL__CONTAINER" -elementet, som vi snart beregner en bredde for basert på antall lysbilder som finnes i den. Vi flytter deretter beholderen ved hjelp av CSS-transformasjon: translatex og overganger for å simulere lysbildebevegelsen. 

 & lt; div class = "c-app-carousel" & gt;
  & lt; div class = "c-app-carousel__wrapper" & gt;
  & lt; div class = "c-app-carousel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt;

10. Legg til karusellkontrollene og pilene

Vi må da legge til HTML for Carousel Controls Container og forrige og neste piler; Sistnevnte ved hjelp av ikonet System og SVG importert i trinn 8. Legg disse etter 'C-App-Carousel__Wrapper' -elementet. 

 & lt; app-icon class = "c-app-icon-pil-prev c-app-carousel__arrow" bruk = "pil" / & gt;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-icon-pil-next c-app-carousel__arrow" bruk = "pil" / & gt;

11. Lag Carousel Data Store og legg til egenskaper

Vi går til tre nye egenskaper til komponentens datalager: "Slidetotal" vil holde det totale antall lysbilder; 'ActiveSlideindex' vil registrere indeksen for det synlige lysbildet, slik at det kan brukes til å beregne beholderens posisjon; Mens autointerval vil registrere intervalltimeren som vil utløse en automatisk lysbildeovergang. Alle disse er satt til Null, med unntak av 'ActiveSlideindex', hvor '0' -verdien indikerer at det første lysbildet skal være standard lysbilde. 

 Data () {
  komme tilbake {
  pil,
  Slidetotal: null,
  ActiveSlideIndex: 0,
  autointerval: null
  }
}

12. Beregn slidetotal

Legg til 'Ref = "Container"' til 'C-App-Carousel__Container' -elementet i malen, og legg deretter ut snippeten nedenfor som en egenskap av selve komponentobjektet. 'Ref' brukes til å gi enkel tilgang til et element, som i dette tilfellet er beholderen, slik at vi kan telle hvor mange barnelementer (aka lysbilder) den har. Tilstedeværelsen av denne logikken i en "montert () '-funksjon betyr at den automatisk kjøres automatisk når komponenten først blir gjengitt. 

 montert () {
  this.slidetotal =.
  dette. $ refs.container.children.Length;
}

13. Beregn beholderbredde

I komponenten, opprett et nytt objektegenskap kalt "beregnet" og i den, en ny funksjon kalt "ContainerWidth () '. Vi bruker dette til å beregne bredden på karusellbeholderen basert på "slidetotal" -figuren. 

 Beregnet: {
   ContainerWidth () {
      returnere denne. Leslidetotal * 100 + '%';
   }
}

14. Opprett metoder

Deretter lager du et annet objektegenskap kalt "metoder" for å lagre våre karusellens funksjoner. 'GOTOSLIDE ()' er en enkel måte å sette 'ActiveSlideindeNEX' fra trinn 11, 'Iscontrolactive ()' returnerer TRUE når en kontrollsindeks samsvarer med 'ActiveSlideindex', mens 'NextSlide ()' og 'Prevlide ()' vil bare sykle gjennom lysbildene. 

 Metoder: {
  gotoSlide (SlideIndex) {
  this.ActivesLideindex = SlideIndex;
  },
  isctrolactive (controlindex) {
  Return ControlIndex - 1
  === this.activesLideindex;
  },
  neurslide () {
  this.ActivesLideindex === dette.
  Slidetotal - 1? this.ActivesLideindex.
  = 0: this.activeslideindex ++;
  },
  prevslide () {
  this.activeslideindex === 0? dette.
  ActiveSlideindex = this.slidetotal - 1
  : denne.aktivitetsslidindex--;
  }
}

15. Beregn karusellens beholderposisjon

Karusellen bruker en prosentverdi med transformasjon: Translatex og CSS animasjon for å simulere lysbildeovergang. Legg til nedenstående snippet til objektet "Computered", slik at vi kan beregne denne verdien. 

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

Vue.js carousel component

I denne Test Carousel Vue-appen er hver komponent dokumentert. Med noen, for eksempel APP-knappen komponenten, er dokumentasjonen minimal. Med andre, for eksempel App-Carousel-Slide-komponentene, er det mye mer informasjon som utviklere trenger å vite

16. Komponere Inline CSS

Nå har vi alle verdiene for å plassere Carousel Slide Container riktig, vi må konstruere CSS som vi vil legge til sin "stil" -attributt. Vi legger til denne logikken som en annen funksjon i "Compucted" -objektet. 

 containerteLe () {
  Returbredde: $ {this.containerwidth};
  Transform: Translatex ($ {dette
  .ActivesLidePosition}); `

17. Bind inline CSS

Legg til nedenstående snippet til "C-APP-CAROUSEL__CONTAINER" -elementet i malen. Dette vil binde den returnerte verdien av 'ContainerteLele ()' fra forrige trinn til 'Style' attributtet til karusellbeholderen, noe som betyr at dens CSS og derfor blir posisjonen automatisk oppdatert når ting endres. 

 V-bind: Style = "ContainerStyle"

18. Koble opp neste / forrige piler

Vi må nå legge til logikk til de neste / forrige pilene, slik at den riktige metoden fra trinn 14 kalles når hver respektive pil klikkes. 'Prevslide ()' -skytten tilhører "C-APP-ICON-PIL-PREV-" -elementet, mens "NextSlide () 'tilhører" C-APP-ICON-pil-neste "-elementet. The "V-on" -direktivet er bare en enkel måte å sette opp hendelseslyttere i vue.js, med 'klikk' som DOM-arrangementet som vi målretter mot. 

 // prev
V-ON: Click.native = "Prevlide ()"
// neste.
V-ON: Click.native = "NextSlide ()"

19. Generer karusellkontroller

La oss generere kontrollelementene og få dem til å vise det tilsvarende lysbildet når de klikkes. Legg til nedenstående element i 'C-App-Carousel__Controls'. Direktivet 'V-for' brukes til å lage en mengde kontrollelementer som samsvarer med "Slidetotal" -variabelen, mens "V-bindingsdirektivet gjør det mulig å bare" IS-aktiv "-klassen når" Isctrolactive "-metoden fra trinn 14 returnerer ekte. Til slutt lager vi en annen hendelse lytter gjennom "V-On", så når du klikker, kaller kontrollen "GOTOSLIDE" -metoden og sender indeksen, som skal samsvare med indeksen for tilsvarende lysbilde. 

 & lt; div v-for = "n i slidetotal"
: Key = "N" V-bind: Klasse =
"{'er-aktiv': Isctrolactive (n)}"
Klasse = "C-APP-CAROUSEL__CONTROL"
V-ON: Click = "GOTOSLIDE (N - 1)" & GT,

Vue.js carousel component

Hvis du jobber med et vue.js-prosjekt med andre utviklere, må du dokumentere en komponent, slik at andre kan forstå hvordan det brukes. Inkluder en kort oversikt over formålet, et eksempel på brukstrekk og info om eiendommer

20. Importer komponenter

La oss nå gå tilbake til toppnivået 'app.vue' komponent og importere alt. Like etter åpningen & lt; script & gt; Tag, importer komponenten '.vue'. Filer: 

 Importer appcarousel fra '@ / komponenter / app-karusell / app-karusell'
Importer AppCarouselslide fra '@ / komponenter / App-Carousel-Slide / App-Carousel-Slide'

Deretter endrer du "komponentets objekt, slik at den refererer til disse nylig importerte komponentene. 

 Komponenter: {
   Appbutton,
   AppCarousel,
   AppCarouselslide.
}

Endelig, i

hvordan - Mest populære artikler

Bruk Adobe XD til å lage mikrointeraksjoner

hvordan Sep 13, 2025

[1. 3] (Bildekreditt: Adobe) Adobe XD kan hjelpe med prototyping - en av de viktigste prosessene i designens livssyklu..

14 Zbrush Workflow Tips

hvordan Sep 13, 2025

[1. 3] Alle kunstnere har sin egen unike arbeidsflyt når du lager 3D-kunst i Zbrush. Denne arbeidsflyten kan bety en haug med tek..

skape et livlig digitalt menneske

hvordan Sep 13, 2025

[1. 3] Du kan kanskje vite det Hvordan tegne folk , Men å skape et digitalt portrett som skiller seg ut fra et fot..

Hvordan lage furry tegneserie tegn

hvordan Sep 13, 2025

Side 1 av 2: Side 1 Side 1 [1. 3] Side 2 [1. 3] ..

Mal et furry pet portrett

hvordan Sep 13, 2025

Vårt ferdige kattportrett Maleri kjæledyr og tegne dyr kan være mye moro. Mens det er flott ..

Hvordan komme i gang med oljemaleri

hvordan Sep 13, 2025

Maleri med oljer er en spennende måte å skape kunst på. Imidlertid kan mange mennesker bli skremt av oljemalingens medium, når det faktisk gir den ideelle måten å lære - som selvfølge..

Hvordan lage manga-stil hår i bevegelse

hvordan Sep 13, 2025

Lære hvordan å tegne manga er ikke lett feat. Så, for å gjøre det enkelt enkelt som mulig, følger jeg en enkel trinnvis-for-trinns prosess som bruker bevegelse, form, far..

Fremskynde din 3D-modellering

hvordan Sep 13, 2025

[1. 3] Denne opplæringen dekker prosessen med å bygge en eiendel - i dette tilfellet a romskipsdesign - Med en re..

Kategorier