Kako da: Jednostavna vrtilja s Vue!

Ili, Što sam naučio gradeći vlastitu vrtiljku.

https://acollectionofatoms.github.io/vue-carousel-example/

Korpusi, prezentacije ili možda samo "klizači". Ova sveprisutna korisnička komponenta zaslužila je svoje mjesto u web dizajnu i kao takva postoji mnoštvo implementacija u različitim tehnologijama.

Otkrićete da Vue.js nije ništa drugačiji.

Ali!

Prije nego što instalirate još jedan npm, molim vas da razmotrite snagu koja vam je već na raspolaganju, a koju daje Vue projekt.

Unesi…

Tranzicijska skupina

Oni koji dolaze iz Reacta možda su upoznati s konceptom tranzicijske skupine. Umjesto da dodatak, grupa prijelaza (za bolje ili lošije) unaprijed se pakira s Vue-om i zaista je bogat API za prijelaz odmah dostupan nakon nove instalacije.

Za one koji nisu upoznati, prelazna skupina slična je komponenti omota tranzicije - obje omogućuju animaciju uklanjanja, dodavanja i (u slučaju prelazne skupine) kretanja elemenata unutar sebe.

Zaronit ćemo dublje u grupu prijenosa za minutu, ali prvo se predstavimo i odajmo počast onome što čini izgradnju vlastite vrtilja!

FLIP i sloboda (iz drugog paketa)

Dakle, što čini vrtiljak? Imate veliki element (obično sliku) koji klizi kroz fokus ili izvan njega (ili pogleda). Jednostavno rečeno, neprimjereno pomicanje jednog elementa u drugi položaj zasigurno je najvažniji dio. Ako njuškate po prijelaznom dijelu dokumenata Vue, vidjet ćete neke prilično zamamne animacije.

Po dokumentima ...

To može izgledati kao čarolija, ali pod kapuljačom, Vue koristi jednostavnu tehniku ​​animacije pod nazivom FLIP kako bi glatko prešao elemente sa svog starog na novi položaj koristeći transformacije.

A ovo je naša karta za zemlju s manje ovisnosti. Ugrađena FLIP tehnika već nam osigurava kruh i maslac onoga što čini karusel karuselom!

IZJAVA O ODRICANJU ODGOVORNOST!

Prije nego što započnemo, želio bih naglasiti riječ jednostavna u naslovu.

Govorimo o kostima s golim kostima-2d. Onaj koji bi odmah prepoznao bilo koji trenutni korisnik svjetske mreže. Uopće se ne razlikuju od ove vrtiće za pokretanje uređaja koja se nalazi ovdje.

Nema maštovitih zvona i zvižduka, a mi ne provodimo funkcionalnost slajda. Ovaj članak upravo opisuje potencijalni temelj za karuselu.

S tim izvan sebe ...

Početak rada

Da bismo brzo pokrenuli stvari, stavit ćemo u naš radni kod varalice AKA službeno podržan Vue alat za skele.

Nakon što instalirate CLI, prototipiziranje postaje povjetarac.

Predložak webpack-a posebno je koristan za brze prototipove i kao takav savršen je za postizanje stvari.

Nakon što pokrenemo i pokrećemo počet ćemo s App.vue

App.vue je lijepa

Tako lijepo. Ok, izbrišimo ovo i počnite novi.

mhm

I u skladu s tim izmijenite app.js ...

I sada smo na novom početku:

Slika ničega.

Ok super.

U našoj datoteci Carousel.vue možemo vrlo dobro baciti oznaku poput ove:

I možda ste sad to vrlo dobro učinili.

Naš ključni igrač, tranzicijska grupa, ima svojstvo oznake koje nam omogućuje da to prikazuje kao div (a ne zadani raspon). Mi mu također dajemo naziv klase i uredno stavimo svoj slide div u nju.

Koristeći v-for direktivu na dijapozitivu, vršimo reaktivno prikaz popisa i sigurni smo da ćete prenijeti a: ključ za svaki slajd kako bi Vue mogao pratiti svaki čvor. Pojednostavljujući stvari, svaki će slajd prikazati njegov naslov koristeći {{slide.title}} unutar h4 elementa.

Prateći meso i krumpir, ubacujemo neke kontrole kako bi se ova stvar pomaknula.

I to je to stvar za marku!

Poslujemo prilično lagano i na