Esnek bir atlıkarınca bileşeni oluşturun

Vue.js, son zamanlarda sıçramalara ve sınırlara geçti, şu ana kadarki altıncı en çok çatallı proje oldu. Github Yazma sırasında, Facebook'un kendi reaksiyonlarının önünde bile. Hızlandığını söylemek güvenlidir. web Geliştirme ve ve güvenilir bir go-to Javascript çerçevesi Projelerde kullanım için.

Bu eğitimde, basit bir atlıkarınca bileşeni oluşturmak için Vue.js kullanacağız. Bu bileşen, geçiş hızı, geçiş tipi ve atlıkarıncının otomatik olarak geçiş yapması gerektiği gibi bazı temel ayarları ayarlamanızı sağlayan bir dizi farklı özelliği kabul eder.

Bütün bunlar çok zor olursa, bir Web Sitesi Oluşturucu aracı daha fazla şey olabilir. Daha karmaşık bir site oluşturmaktan mutlu? İhtiyacınız var ağ sağlayıcısı bu başa çıkabilir.

• Vue.js ile performansı hızlandırın

Başlamak, Proje dosyalarını buradan indirin (ve onları kaydedin Bulut depolama ) ve tercih ettiğiniz metin düzenleyicisindeki 'Web Sitesi Şablon' dizini açın. Bu arada Terminal'de, CD 'Web Sitesi Şablonu'na' ve ardından Projeleri NODE.JS Bağımlılıklarını yüklemek için 'NPM yükleme' çalıştırın. Son olarak, bir geliştirme sunucusunu başlatmak için 'NPM Run Dev'u çalıştırın, böylece projenizi tarayıcıda görüntüleyebilirsiniz. Tipik olarak bu 'localhost: 8080' de olurdu.

01. Carousel Slayt Dosyaları Oluşturun

'SRC / Components' de, 'App-Carousel-Slide' adlı yeni bir dizin oluşturun ve IT İki dosyada: 'App-Carousel-Slide.Vue' ve 'Component.App-Carousel-slide.scss'. Bunlar, oluşturacağımız iki yeni Vue.js bileşeninin birincisini içerecektir, bu da birlikte kullanıldığında carousel bileşenimizi oluşturur.

02. Carousel Slayt Scss ekleyin

Filesilo paketinden, '/support-files/step-02-slide.scss' in içeriğini 'component.app-carousel-slide.scss' içine kopyalayın. Bu, slayt bileşeninin SCS'leridir ve her slaydın ana öğesini doldurmak için genişlettiğinden emin olmak için 'Flex-Grow' 'özelliğini kullanır.

03. Slayt bileşenini oluşturun

Boş 'App-Carousel-Slide.Vue' dosyasında, Vue.js bileşeninin yapısını oluşturmak için aşağıdaki snippet'i ekleyin. Bunu atlıkarınca slaytını inşa etmek için bir temel olarak kullanacağız.

 & lt; şablon ve GT;
& lt; script & gt;
Default ihracatı {
  İsim: 'App-Carousel-Slide'
}
& lt; / script & gt; 

04. Carousel slayt görüntüleri için bir şablon yuvası ekleyin

Boşta; Şablon ve GT; Carousel slaytının unsuru, slaydı göstermek için bir 'Div' unsuru ekleyeceğiz, birlikte 'Resmi' adlandıracağımız özel bir slot öğesi ile birlikte. Vue.JS'de, yuvalar, kendi içeriğinizi, bileşenin şablonuyla onu düzenlemeden araya sokmanızı sağlar. Bu durumda, daha sonra slayt arka planı için görüntüyü geçebileceğimiz için kullanılır, bu nedenle son sonuç, nihayetinde kullanıldığında, 'APP-Carousel-Slide & GT; IMG SRC =' 'ALT =' '& gt; / app-carousel-slayt & gt;'.

 & lt; div class = "C-app-carousel-slayt" & gt;
  & lt; slot ad = "image" & gt; / slot & gt;
& lt; / div & gt; 

05. Slayt metin kabını ekleyin

Slayt bileşeni için kalan tek şey, metin kabını oluşturmaktır. Yuvaları tekrar, bir tane daha büyük slayt başlığı ve bir normal metin için kullanacağız. Ayrıca, "V-IF" adlı 'V-if' adlı bir vue.js yönergesini kullanacağız. Mantık eklemek için, yalnızca metin kabını en az biri içeriden biri içerik geçerse, metin kabını oluşturur. 'Görüntü' yuvasından hemen önce, bu snippet'i 'C-app-carousel-slide' bölümüne ekleyin.

 & LT; DIV sınıfı = "C-app-carousel-slide__text-blok"
v-if = "Bu. $ Slots ['Title'] || Bu. $ Slots ['metin']" & gt;
  & lt; h1 sınıfı = "C-app-carousel-slide__title"
  v-if = "Bu. $ Slots ['unvanı']" & gt;
  & lt; slot ad = "başlık" & gt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "C-app-carousel-slide__text"
  v-if = "bu. $ yuvaları ['metin']" & gt;
  & lt; slot ad = "metin" & gt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Carousel dosyaları oluşturun

'SRC / Components' 'de geri dönün,' App-Carousel 'adlı yeni bir dizin oluşturun ve ardından IT İki yeni dosyada:' App-Carousel.Vue 've' Component.app-carousel.scss '. Bunlar iki vue.js bileşeninin ikincisini tutacaktır: ana atlıkarınca kendisi.

07. Carousel CSS ekleyin

'/Support-files/step-07-slide.scss' in içeriğini boş 'Component.app-carousel.scss' içine kopyalayın. Bu, ana atlıkarınca bileşeni için SCS'dir.

08. Carousel bileşeni oluşturun

Sonraki 'App-Carousel.Vue' de, atlıkarınca bileşeninin yapısını inşa edeceğiz. Carousel'in sonraki ve önceki simgelerinde daha sonra kullanmak için 'Appicon' bileşeni ve 'Ok' SVG'yi ithal ediyoruz. Bunlar, 'SVG-Sprite-Loader' bağımlılığı ile birlikte, SVG 'sembolleri' ve 'Kullanım' öğesini kullanarak çalışan bir temel SVG simgesi sistemi oluşturmak için bir araya gelir.

 & lt; şablon ve GT;
& lt; script & gt;
İthalat Appicon
'@ / Components / App-icon / app-icon'
ithalat okundan
'./../../assets/img/arrow.svg'
Default ihracatı {
  İsim: 'App-Carousel',
  Bileşenler: {
  APPICON
  }
  veri () {
  dönüş {
  ok
  }
  }
}
& lt; / script & gt; 

09. Carousel şablonunu inşa et

Boş şablon öğesine içerik eklemeye başlayalım. Buradaki ana ilgi alanı, içinde bulunan slayt sayısına göre kısaca bir genişliği hesaplayacağımız 'C-App-Carousel__Container' unsurudur. Daha sonra CSS dönüşümünü kullanarak kabı hareket ettireceğiz: slayt hareketini simüle etmek için TranslateS ve geçişler.

 & lt; div class = "C-app-carousel" & gt;
  & lt; div sınıf = "C-app-carousel__wrapper" & gt;
  & lt; div sınıf = "C-app-carousel__container" & gt;
  & lt; slot & gt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Atlıkarınca kontrollerini ve okları ekleyin

Daha sonra Carousel Controls konteyneri ve önceki ve sonraki okları için HTML'yi eklememiz gerekir; İkili simge sistemi ve SVG kullanılarak 4. adımda içe aktarılır. Bunları 'C-App-Carousel__wrapper' öğesinden sonra ekleyin.

 & lt; app-icon sınıfı = "C-app-icon-arrow-prev C-app-carousel__arrow" Kullanımı = "ok" / & gt;
& lt; div sınıf = "C-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "C-app-icon-arrow-Next C-app-carousel__arrow" Kullanımı = "ok" / & gt; 

11. Carousel veri deposunu oluşturun ve özellikler ekleyin

Bileşenin veri deposuna üç yeni özellik ekledik: 'slideToTOTAL' toplam slayt sayısını tutacaktır; 'ActiveSlideIndex', görünür slaydın dizinini kaydeder, böylece konteynerin konumunu hesaplamak için kullanılabiliyor; AutoInterval, otomatik slayt geçişini tetikleyecek aralık zamanlayıcısını kaydeder. Bunların hepsi NULL olarak ayarlanır, '0' değerinin, ilk slaytın varsayılan slayt'ın olacağını gösterdiği 'ActiveSlideIndex' hariç.

 veri () {
  dönüş {
  ok,
  slideetotal: null,
  ActiveSlideIndex: 0,
  AutoInterval: Null
  }
} 

12. slidetotal hesaplamak

Şablondaki 'C-App-Carousel__Container' öğesine 'Ref = "Konteyner"' '' eklenti ve ardından KONUŞTURMA nesnesinin kendisinin bir özelliği olarak altını ekleyin. 'Ref', bu durumda konteyner olan bir elemana kolay erişim sağlamak için kullanılır, böylece kaç çocuk elemanını (aka slaytları) sayabiliriz. Bu mantığın 'monte edilmiş ()' işlevinde varlığı, bileşen ilk önce oluşturulduğunda otomatik olarak çalıştırıldığı anlamına gelir.

 monte () {
  this.slidetotal =
  Bu. $ Refs.Container.Children.Length;
}

13. Konteyner genişliğini hesaplayın

Bileşende, 'hesaplanan' adlı yeni bir nesne özelliği oluşturun ve içinde 'KonteynerWidth ()' adlı yeni bir işlev. Bunu 'slideetotal' rakamına göre atlıkarınca kabının genişliğini hesaplamak için kullanacağız.

 hesaplanmış: {
   konteynerWidth () {
      Bunu iade edin.Slidetotal * 100 + '%';
   }
} 

14. Oluşturma Yöntemleri

Sonra, Carousel'in işlevlerimizi saklamak için 'Yöntemler' adında başka bir nesne özelliği oluşturun. 'GOOSOSLIDE ()' Adım 11'den 'ActiveSlideIdex' 'ayarlamanın kolay bir yoludur,' IsControlactive () '' Bir kontrol endeksi 'ActiveSlideIndex' eşleştiğinde, 'Nextslide ()' ve 'PrevSlide ()' 'de geçecek şekilde döner. Slaytlar.

 Yöntemler: {
  Gotoslide (slideindex) {
  this.activeslideindex = slideindex;
  }
  iscontrolactive (ControlIndex) {
  Return ControlIndex - 1
  === this.activeslidex;
  }
  sonraki slayt() {
  this.activeslideindex === bu.
  SlideToTal - 1? this.activeslideindex
  = 0: this.activesidedex ++;
  }
  prevslide () {
  this.activeslideindex === 0? bu.
  ActiveSlideIndex = this.slidetotal - 1
  : this.activeslideindex--;
  }
} 

15. Carousel'in konteyner konumunu hesaplayın

Carousel, dönüşümlü bir yüzde değeri kullanır: slayt geçişini simüle etmek için TranslateCex ve CSS animasyonu. Aşağıdaki snippet'i 'hesaplanan' nesneye ekleyin, böylece bu değeri hesaplayabiliriz.

 ActiveSlidePosition () {
  iade '-' + (100 / this.slidetotal)
  * This.activeslideindex + '%';
} 

16. Satır içi CSS'yi oluşturun

Şimdi, Carousel Slayt kabını doğru şekilde konumlandırmak için tüm değerlere sahibiz, daha sonra 'Stil' özniteliğine ekleyeceğimiz CSS'yi inşa etmeliyiz. Bu mantığı 'hesaplanan' nesnede başka bir işlev olarak ekleyeceğiz.

 konteynerstyle () {
  dönüş 'genişliği: $ {this.containerwidth};
  dönüşümü: translatex ($ {bu
  .Activesideposition}); `

17. Inline CSS'yi bağlayın

Aşağıdaki snippet'i şablondaki 'C-App-Carousel__Container' öğesine ekleyin. Bu, 'ContainerStyle ()' 'ın geri dönen değerini önceki adımdan' stil 'atlıkarınca kabının' stil 'niteliğine bağlayacaktır, yani CSS'nin ve dolayısıyla işler değiştiğinde konumunun otomatik olarak güncelleneceği anlamına gelir.

 V-Bind: Style = "Konteynerstyle" 

18. Bir sonraki / önceki okları takın

Artık bir sonraki / önceki oklara mantık eklemeliyiz, böylece her bir oka tıklandığında adım 14'ten gelen doğru yöntem çağrılır. 'Önceki ()' snippet 'C-app-simge-arrow-prev' unsuruna aittir, 'nextslide ()' 'C-App-simge-ok-sonraki' öğesi'ne aittir. 'V-ON' Direktifi, Vue.js'teki olay dinleyicilerini ayarlamanın kolay bir yoludur, hedefler olduğumuz DOM etkinliği olan 'Tıklama' ile.

 // Prev
V-ON: Click.Native = "PrevSlide ()"
// Sonraki
V-ON: Click.Native = "Nextslide ()" 

19. Carousel kontrolleri oluşturun

Kontrol elemanlarını oluşturalım ve tıklandığında ilgili kaydı göstermelerini sağlayalım. Aşağıdaki elemanı 'C-app-carousel__controls' bölümüne ekleyin. 'V-için' direktifi, 'slidetotal' değişkenine eşleşen bir miktar kontrol elemanı oluşturmak için kullanılırken, 'V-BID' direktifi, 14. adımdan itibaren 'ISControlactive' yöntemi 'ISControlactive' yöntemi olduğunda 'IS-Active' sınıfını etkinleştirirken kullanılır. doğru. Son olarak, 'V-ON' aracılığıyla başka bir olay dinleyicisi yaratıyoruz, böylece, tıklandığında, kontrol, 'GotoSlide' yöntemini çağırır ve ilgili slayt diziniyle eşleşmesi gereken dizini geçer.

 & lt; div v-for = "n slideetotal"
: Anahtar = "n" v-bind: Sınıf =
"{'Aktif': iskellectictive (n)}"
Sınıf = "C-app-carousel__control"
V-ON: CLICK = "GOTOSLIDE (N - 1)" & GT; 

20. Bileşenleri İthalat

Şimdi 'App.Vue' bileşenine geri dönelim ve her şeyi içe aktaralım. Açılıştan hemen sonra & lt; script ve gt; Etiketi, '.vue' bileşenini ithal edin. Dosyalar:

 '@ / Components / App-Carousel / App-Carousel' dan AppCarousel'i İçe Aktar
'@ / Components / App-Carousel-Slide / App-Carousel-Slide' dan AppCarouselslide İçe Aktarın 

Sonra, 'bileşenlerin nesnesini değiştirin, böylece bu yeni ithal edilen bileşenlere atıfta bulunur.

 Bileşenler: {
   appbutton,
   Appcarousel,
   appcarouselslide
} 

Son olarak, & lt; stil ve gt; Tag, yeni SCS'lerimizi bileşen ithalatının geri kalanıyla içe aktarın.

 @import "/ bileşenleri / App-Carousel /
component.app-carousel ";
@import "/ bileşenleri / app-carousel-slayt /
component.app-carousel-slayt "; 

21. Carousel ve Slaytlar ekleyin

Son olarak, yeni atlıkarınca bileşenimizi ve bazı slaytları ana uygulamaya ekleyelim. Hala 'App.Vue' içinde, 'yapım aşamasında' aşağıdaki pasif ile değiştirin. Her birinde, app-carousel-slayt & gt; Öğe tek bir kaydırmayı temsil eder. İstediğiniz metni veya görüntüyü değiştirerek istediğiniz kadar ekleyin. Dahil edilen 'TEST-COTO-01.JPG' 'TEST-PHOTO-05.JPG'. Bir kez derleme bitmişse, her şey şimdi çalışmalıdır. Huzzah!

& lt; app-carousel & gt;
  & lt; app-carousel-slayt & gt;
  & lt; şablon slot = "başlık" & gt; slaytım
  & lt; / template & gt;
  & lt; şablon slot = "metin" & gt;
  Bu, bu bir atlıkarınca slayt. & lt; / p & gt;
  & lt; app-button & gt; Hadi gidelim & lt; / app-button & gt;
  & lt; / template & gt;
  & lt; img slot = "image"
  src = "./ Varlıklar / IMG / Test-photo-01.jpg"
  alt = "Carousel fotoğrafım" & gt;
  & lt; / app-carousel-slayt & gt;
& lt; / app-carousel & gt; 

22. Carousel'e esneklik ekleyin

Şimdi bir çalışma vue.js carousel var, bazı ek işlevler ekleyelim, böylece slayt geçişinin süresini, zamanlama özelliğini kolayca özelleştirebileceğimiz, slaytların otomatik kayması gerektiğinde ve eğer öyleyse ne sıklıkta özelleştirebileceğiz. 'App-Carousel.Vue' i tekrar açın ve snippet'teki özellikleri aşağıdaki bileşen nesnesine ekleyin.

 Props: {
  geçiş süresi: {
  Tip: Dize,
  Varsayılan: '0,5s'
  }
  TransitionTiming: {
  Tip: Dize,
  Varsayılan: 'Kolay'
  }
} 

23. Amend ContainerStyle ()

Bu özelliklere geçen değerler, 18. adımdan itibaren Carousel'in satır içi CSS'ye yol açmalıdır. Şimdi bunun olduğundan emin olmak için 'Konteynerstyle' hesaplanan işlevi değiştirelim.

 konteynerstyle () {
  return `genişlik: $ {this.containerwidth};
  Dönüşüm:
  çevirek ($ {this.activesideposition});
  Geçiş zamanlama fonksiyonu:
  $ {this.TrAritionTiming};
  geçiş süresi:
  $ {this.TrAritionDuration}; `
} 

24. Carousel özelliklerine veri ilet

Aşağıdaki snippet, verileri bu yeni özelliklere nasıl geçeceğini göstermektedir; App-Carousel & GT; 'App.Vue' öğesi. Eklendikten sonra, istediğiniz değerleri geçirebilmelisiniz. Örneğin, bir "3.0S" süresi çok yavaş bir slayt geçişine neden olur!

 & lt; app-carousel
Geçiş Süresi = "0.25S"
Geçiş zamanlaması = "Kolaylık dışı" & gt; 

25. Otomatik slayt sahne ekleme

Otomatik slayt için, 'App-Carousel.Vue' bölümünde 'Sahne' için iki ek nesne eklememiz gerekir. 'Auto', atlıkarıncının otomatik kaydırmaya devam etmesi gerektiğine karşılık gelen "gerçek 'veya' yanlış'dir. 'Autotiming', otomatik kaydırmadan önce zamanını kontrol eder, varsayılan değer 5000 milisaniyedir.

 Auto: {
  Tip: Dize,
  Varsayılan: 'Yanlış'
}
autotiming: {
  Tip: Dize,
  Varsayılan: 5000
} 

26. Otomatik kaydırmayı başlat

Şimdi bileşen yükünde otomatik kaydırmayı başlatmalıyız. Carousel'in 'monte edilmiş ()' işlevinde, mevcut içerikten sonra, 'Otomatik' özelliğinin 'TRUE' olarak ayarlanıp ayarlanmadığını kontrol edin. Eğer öyleyse, 'AutoTiming' değeri geçtikten sonra 'Nextslide ()' yöntemini tekrar tekrar tetikleyen bir aralık yaratın.

 Eğer (this.auto === 'true') {
  this.autointerval = setinterval (() = & gt; {
  this.nextslide ();
  }, Parseint (this.autotiming));
} 

27. Otomatik Slayt Yöntemini İptal Et

Açıkçası, kullanıcının atlıkarıncayı manuel olarak kullanma arzusunu dile getirdilerse, kullanıcının otomatik kaymayı devre dışı bırakması için bir yola ihtiyacımız var. Bu doğru ilk adım, 'Cancelautoslide' adlı yeni bir atlıkul yöntemidir. Bu, önceki adımda oluşturulan aralığı iptal eder.

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

28. Tetikleyici Cancelautoslide

Kullanıcı bir ok veya kontrol elemanı tıklarsa, atarousel'i manuel olarak çalıştırmak istediklerini varsaymak makul, bu öğelerin herhangi biri tıklatıldığında 'Cancelautoslide' yöntemini arayalım. Bunu yapmak için, 'V-ON' direktifine '+ Cancelautoslide ()' ekleyin. 'Önceki' slayt okunu kullanarak aşağıdaki snippet'e bakın.

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

29. Otomatik slayt sahibine değerleri geç

Son olarak, oluşturduğumuz otomatik slayt özelliklerine bazı değerleri geçelim. 'App.Vue' içinde geri dönün, aşağıdaki snippet'i (App-Carousel ve GT; Her üç saniyede bir otomatik kaydırmayı etkinleştirmek için öğe.

 Auto = "true" auto-timing = "3000"

30. Carousel bileşenini oluşturmayı bitirin

Geliştirme sunucusunu iptal edin veya yeni bir terminal penceresi açın ve 'Down' dizininde vue.js powered carousel bileşeninin derlenmiş, üretime hazır bir sürümü oluşturmak için 'NPM Run Build' çalıştırın.

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi Web Tasarımcısı'nın 269 sayısında yayınlandı. Sayı 269 burada satın al veya Burada web tasarımcısına abone olun .

Web Tasarım Etkinliği üretmek Londra 19-21 Eylül 2018 tarihinde iade, bir sürü endüstri lideri hoparlörler, tam gün atölye ve değerli ağ fırsatları sunan, kaçırmayın - kaçırmayın. Senin üretmek şimdi bilet .

İlgili Makaleler:

• Bugünün Web Tasarımcısı için 7 Temel Araçlar
• Web sitenize bir aksaklık efekti ekleyin
• 6 Şaşırtıcı 'Hakkında' Sayfalar