Buat komponen korsel yang fleksibel

Vue.js telah datang pada lompatan dan batasan baru-baru ini, menjadi proyek keenam yang paling bercabang sejauh ini Github. Pada saat penulisan, bahkan di depan reaksik Facebook sendiri. Aman untuk mengatakan bahwa itu cepat menjadi andalan di pengembangan web , dan go-to yang andal Kerangka Javascript. untuk digunakan dalam proyek.

Dalam tutorial ini, kita akan menggunakan vue.js untuk membuat komponen korsel sederhana. Komponen ini akan menerima sejumlah properti yang berbeda, memungkinkan Anda untuk mengubah beberapa pengaturan dasar seperti kecepatan transisi, jenis transisi, dan apakah korsel harus secara otomatis meluncur.

Jika semua ini terdengar terlalu rumit, a Pembangun Situs Web Alat mungkin lebih merupakan hal Anda. Senang membuat situs yang lebih kompleks? Anda perlu hosting web. yang bisa mengatasinya.

• Mempercepat kinerja dengan vue.js

Untuk memulai, Unduh file proyek di sini (dan simpan di penyimpanan awan ) Dan buka direktori 'Situs Web-Template' di editor teks pilihan Anda. Sementara itu di terminal, CD menjadi 'situs web-template' dan kemudian menjalankan 'NPM Install' untuk menginstal proyek dependensi node.js. Akhirnya, jalankan 'NPM Run Dev' untuk memulai server pengembangan sehingga Anda dapat melihat proyek Anda di browser. Biasanya ini akan berada di 'localhost: 8080'.

01. Buat file slide carousel

Dalam 'src / komponen', buat direktori baru yang disebut 'app-carousel-slide' dan di dalamnya dua file: 'app-carousel-slide.vue' dan 'component.app-carousel-slide.scss'. Ini akan berisi yang pertama dari dua komponen Vue.js baru yang akan kami buat, yang bila digunakan bersama akan membuat komponen korsel kami.

02. Tambahkan SCS Slide Carousel

Dari paket filesilo, salin isi '/support-files/step-02-slide.scss' ke 'komponen.app-carousel-slide.scss'. Ini adalah SCS untuk komponen slide, dan menggunakan properti 'Flex-Grow' untuk memastikan setiap slide mengembang untuk mengisi elemen induknya.

03. Buat komponen slide

Dalam file 'app-carousel-slide.vue' kosong, tambahkan cuplikan di bawah ini untuk membuat struktur komponen vue.js. Kami akan menggunakan ini sebagai fondasi untuk membangun slide carousel.

 & lt; templat & gt; & lt; / template & gt;
& lt; script & gt;
Ekspor default {
  Nama: 'App-Carousel-Slide'
}
& lt; / script & gt; 

04. Tambahkan slot template untuk gambar slide carousel

Di Empty & lt; templat & gt; Elemen slide carousel, kami akan menambahkan elemen 'div' untuk mewakili slide, bersama dengan elemen slot khusus yang akan kami beri nama 'gambar'. Di vue.js, slot memungkinkan Anda untuk menjalin konten Anda sendiri dengan templat komponen tanpa mengeditnya. Dalam hal ini, mereka digunakan sehingga kita dapat meneruskan gambar untuk latar belakang slide, sehingga hasil akhirnya, ketika akhirnya digunakan, akan terlihat seperti '& lt; aplikasi-carousel-slide & gt; & lt; img src =' ''. '& gt; & lt; / app-carousel-slide & gt;'.

 & lt; div class = "c-app-carousel-slide" & gt;
  & lt; slot name = "gambar" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Tambahkan wadah teks slide

Semua yang tersisa untuk komponen slide adalah membangun wadah teks. Kami akan menggunakan slot lagi, satu untuk judul slide yang lebih besar dan satu untuk teks biasa. Kami juga akan menggunakan arahan vue.js yang disebut 'v-if' untuk menambah logika, yang hanya membuat wadah teks jika setidaknya satu slot lulus konten. Tambahkan cuplikan ini di 'c-app-carousel-slide', tepat sebelum slot 'gambar'.

 & lt; div class = "c-app-carousel-slide__text-block"
v-if = "Ini. $ slot ['judul'] || Ini. $ slot ['teks']" & gt;
  & lt; h1 class = "c-app-carousel-slide__title"
  v-if = "Ini. $ slot ['judul']" & gt;
  & lt; nama slot = "judul" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carousel-slide__text"
  v-if = "Ini. $ slot ['teks']" & gt;
  & lt; nama slot = "teks" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Buat file korsel

Kembali ke 'SRC / komponen', buat direktori baru yang disebut 'App-Carousel' dan kemudian di dalamnya dua file baru: 'app-carousel.vue' dan 'component.app-carousel.scss'. Ini akan menampung kedua komponen dua vue.js: korsel utama itu sendiri.

07. Tambahkan Carousel CSS

Salin konten '/support-files/step-07-slide.scss' ke 'komponen.app-carousel.scss' yang kosong. Ini adalah SCS untuk komponen korsel utama.

08. Buat komponen korsel

Selanjutnya di 'App-Carousel.vue', kita akan membangun struktur komponen korsel. Kami mengimpor komponen 'Appicon' dan SVG 'panah' untuk digunakan nanti di ikon Carousel berikutnya dan sebelumnya. Ini bekerja bersama dengan ketergantungan 'SVG-Sprite-loader' untuk menghasilkan sistem ikon SVG dasar, yang berfungsi menggunakan 'simbol' SVG dan elemen 'use'.

 & lt; templat & gt; & lt; / template & gt;
& lt; script & gt;
Impor Appicon dari
'@ / komponen / aplikasi-ikon / aplikasi-icon'
Impor panah dari.
'./../../assets/img/arrow.svg'
Ekspor default {
  Nama: 'App-Carousel',
  Komponen: {
  Appicon.
  },
  data () {
  kembali {
  panah
  }
  }
}
& lt; / script & gt; 

09. Bangun template korsel

Mari kita mulai menambahkan konten ke elemen templat kosong. Daerah utama yang menarik di sini adalah elemen 'C-App-Carousel__Container', yang akan segera menghitung lebar berdasarkan jumlah slide yang ditemukan di dalamnya. Kami kemudian akan memindahkan wadah menggunakan transformasi CSS: Translatex dan transisi untuk mensimulasikan gerakan slide.

 & 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. Tambahkan kontrol dan panah korsel

Kami kemudian perlu menambahkan HTML untuk wadah Carousel Controls dan panah sebelumnya dan berikutnya; Yang terakhir menggunakan sistem ikon dan svg yang diimpor pada langkah 8. Tambahkan ini setelah elemen 'c-app-carousel__'.

 & lt; app-icon class = "c-app-icon-arrow-prev c-app-carousel__arrow" gunakan = "panah" / & gt;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-icon-arrow-next c-app-carousel__arrow" use = "panah" / & gt; 

11. Buat toko data carousel dan tambahkan properti

Kami akan menambahkan tiga properti baru ke toko data komponen: 'slidetotal' akan menahan jumlah slide; 'ActiveSlideindex' akan merekam indeks slide yang terlihat sehingga dapat digunakan untuk menghitung posisi wadah; Sementara autointerval akan merekam waktu interval yang akan memicu transisi slide otomatis. Semua ini diatur ke NULL, dengan pengecualian 'ActiveSlideIndex', di mana nilai '0' menunjukkan bahwa slide pertama harus menjadi slide default.

 data () {
  kembali {
  panah,
  slidetotal: null,
  ActiveSlideindex: 0,
  AutoInterval: null.
  }
} 

12. Hitung slidetotal.

Tambahkan 'ref = "wadah" ke elemen' C-App-Carousel__Container 'pada template dan kemudian tambahkan cuplikan di bawah ini sebagai properti dari objek komponen itu sendiri. 'REF' digunakan untuk memberikan akses mudah ke suatu elemen, yang dalam hal ini adalah wadah sehingga kita dapat menghitung berapa banyak elemen anak (alias slide) yang dimilikinya. Kehadiran logika ini dalam fungsi 'terpasang ()' berarti kemudian secara otomatis dijalankan ketika komponen pertama kali diberikan.

 Mounted () {
  Ini.slidetotal =
  Ini. $ Refs.container.Children.Length;
}

13. Hitung Lebar Wadah

Dalam komponen, buat properti objek baru yang disebut 'dihitung' dan di dalamnya, fungsi baru yang disebut 'wadaherwidth ()'. Kami akan menggunakan ini untuk menghitung lebar wadah korsel berdasarkan angka 'slidetotal'.

 Komputasi: {
   wadaherwidth () {
      kembalikan ini.slidetotal * 100 + '%';
   }
} 

14. Buat Metode

Selanjutnya, buat properti objek lain yang disebut 'Metode' untuk menyimpan fungsi Carousel kami. 'Gotoslide ()' adalah cara mudah mengatur 'ActiveSlideIndex' dari langkah 11, 'iScontrolactive ()' mengembalikan true ketika indeks kontrol cocok 'ActiveSlideindex', sedangkan 'nextslide ()' dan 'prevslide ()' akan hanya siklus slide.

 Metode: {
  gotoslide (slideindex) {
  this.activeslideindex = slideindex;
  },
  ISCONTROLACTIF (ControlIndex) {
  Return ControlIndex - 1
  === this.activeslideindex;
  },
  slide selanjut nya() {
  Ini.ActiveSlideIndex === Ini.
  slidetotal - 1? Ini.ActiveSlideIndex.
  = 0: this.activeslideindex ++;
  },
  prevslide () {
  Ini.ActiveSlideIndex === 0? ini.
  ActiveSlideIndex = this.slidetotal - 1
  : this.activeslideindex--;
  }
} 

15. Hitung posisi wadah Carousel

Korsel menggunakan nilai persentase dengan transformasi: translatex dan animasi CSS untuk mensimulasikan transisi slide. Tambahkan cuplikan di bawah ini ke objek 'dihitung' sehingga kami dapat menghitung nilai ini.

 ActiveSlideposition () {
  Return '-' + (100 / ini.slidetotal)
  * this.activeslideindex + '%';
} 

16. Komposisikan CSS inline

Sekarang kita memiliki semua nilai untuk memposisikan dengan benar wadah slide carousel, kita perlu membangun CSS yang kemudian akan kita tambahkan ke atribut 'Gayatan'. Kami akan menambahkan logika ini sebagai fungsi lain di objek 'dihitung'.

 kontainertyle () {
  mengembalikan lebar: $ {this.containerwidth};
  Transformasi: Translatex ($ {Ini
  .ActiveSlideposition}); `

17. Bind inline css

Tambahkan cuplikan di bawah ini ke elemen 'C-App-Carousel__Container' pada template. Ini akan mengikat nilai yang dikembalikan dari 'kontainertyle ()' dari langkah sebelumnya ke atribut 'gaya' dari wadah korsel, yang berarti bahwa CSS dan karena itu posisinya akan secara otomatis diperbarui.

 v-bind: style = "wadahertyle" 

18. Menghubungkan panah berikutnya / sebelumnya

Kami sekarang perlu menambahkan logika ke panah berikutnya / sebelumnya sehingga metode yang benar dari langkah 14 disebut ketika masing-masing panah diklik. Cuplikan 'prevslide ()' termasuk dalam elemen 'C-App-icon-arrow-prev', sedangkan 'NextSlide ()' termasuk dalam elemen 'C-App-icon-Arrow-Next'. Arahan 'V-on' hanyalah cara mudah untuk mengatur pendengar acara di vue.js, dengan 'klik' menjadi acara dom yang kami targetkan.

 // Sebelumnya
v-on: klik .native = "prevslide ()"
// Lanjut
v-on: klik .native = "NextSlide ()" 

19. menghasilkan kontrol korsel

Mari kita hasilkan elemen kontrol dan buat mereka menunjukkan slide yang sesuai saat diklik. Tambahkan elemen di bawah ini di 'C-App-Carousel__Controls'. Arahan 'V-for' digunakan untuk membuat sejumlah elemen kontrol yang cocok dengan variabel 'slidetotal', sementara arahan 'V-BIND' memungkinkan kelas 'is-aktif' hanya ketika metode 'iscontrolactive' dari langkah 14 pengembalian benar. Akhirnya, kami menciptakan pendengar acara lain melalui 'V-on' jadi, ketika diklik, kontrol memanggil metode 'gotoslide' dan melewati indeksnya, yang harus cocok dengan indeks slide yang sesuai.

 & lt; div v-for = "n dalam slidetotal"
: Key = "n" v-bind: class =
"{'is-Active': iscontrolactive (n)}"
Kelas = "C-App-Carousel__Control"
v-on: klik = "gotoslide (n - 1)" & gt; & lt; / div & gt; 

20. Impor komponen

Sekarang mari kita kembali ke komponen 'app.vue' tingkat atas dan impor segalanya. Tepat setelah pembukaan & lt; script & gt; Tag, impor komponen '.vue'. File:

 Impor AppCarousel dari '@ / komponen / app-carousel / app-carousel'
Impor AppCarouselslide dari '@ / komponen / app-carousel-slide / app-carousel-slide' 

Selanjutnya, ubah objek 'komponen' sehingga referensi komponen yang baru diimpor ini.

 Komponen: {
   appbutton,
   AppCarousel,
   appcarouselslide.
} 

Akhirnya, dalam gaya & gt; Tag, impor SCS baru kami dengan sisa impor komponen.

 @Import "/ Komponen / App-Carousel /
komponen.app-carousel ";
@Import "/ Komponen / App-Carousel-Slide /
komponen.app-carousel-slide "; 

21. Tambahkan korsel dan slide

Akhirnya, mari kita tambahkan komponen korsel baru kami dan beberapa slide ke aplikasi utama. Masih dalam 'app.vue', ganti 'di bawah konstruksi' dengan cuplikan di bawah ini. Masing-masing & lt; aplikasi-carousel-slide & gt; elemen mewakili satu slide. Tambahkan sebanyak yang Anda suka, ganti teks atau gambar di mana diinginkan. Termasuk adalah 'uji-photo-01.jpg' untuk 'Test-photo-05.jpg'. Setelah selesai dikompilasi, semuanya harus berfungsi. Sabas!

& lt; app-carousel & gt;
  & lt; app-carousel-slide & gt;
  & lt; templat slot = "judul" & gt; slide saya
  & lt; / template & gt;
  & lt; template slot = "teks" & gt;
  & lt; p & gt; ini adalah slide carousel. & lt; / p & gt;
  & lt; tombol-tombol & gt; mari kita pergi & lt; / aplikasi tombol & gt;
  & lt; / template & gt;
  & lt; slot img = "gambar"
  src = "./ aset / img / test-photo-01.jpg"
  alt = "foto carousel saya" & gt;
  & lt; / app-carousel-slide & gt;
& lt; / app-carousel & gt; 

22. Tambahkan fleksibilitas ke korsel

Sekarang kita memiliki carousel vue.js yang berfungsi, mari kita tambahkan beberapa fungsi tambahan sehingga kita dapat dengan mudah menyesuaikan durasi transisi slide, properti waktunya, menyatakan jika slide harus meluncur otomatis, dan jika demikian. Buka kembali 'app-carousel.vue' dan tambahkan properti di cuplikan di bawah ini ke objek komponen.

 alat peraga: {
  TransitionDuration: {
  Jenis: string,
  Default: '0,5s'
  },
  Transitions: {
  Jenis: string,
  Default: 'Mudah'
  }
} 

23. Amend Containertyle ()

Nilai-nilai yang diteruskan ke properti ini harus berjalan ke CSS inline Carousel dari belakang pada langkah 17. Sekarang mari kita mengubah fungsi komputasi 'wadah' untuk memastikan bahwa ini terjadi.

 kontainertyle () {
  mengembalikan `lebar: $ {this.containerwidth};
  mengubah:
  Translatex ($ {this.activeslideposition});
  Fungsi transisi-waktu:
  $ {this.transitiming};
  Durasi transisi:
  $ {this.transitiation}; `
} 

24. Lewati data ke properti korsel

Cuplikan di bawah ini mengilustrasikan bagaimana kita akan meneruskan data ke properti baru ini ke & lt; App-Carousel & GT; elemen dalam 'app.vue'. Setelah ditambahkan, Anda harus dapat memberikan nilai apa pun yang Anda inginkan. Misalnya, durasi "3.0-an" akan menghasilkan transisi slide yang sangat lambat!

 & lt; carousel aplikasi
Durasi transisi = "0,25s"
Transisi-Timing = "Mudah In-Out" & gt; 

25. Menambahkan alat peraga slide otomatis

Untuk slide otomatis, kita perlu menambahkan dua objek tambahan untuk 'alat peraga' di 'app-carousel.vue'. 'Otomatis' adalah 'benar' atau 'false', yang sesuai dengan jika korsel harus terus meluncur otomatis. 'AutoTiming' mengontrol waktu sebelum pemicu slide otomatis, dengan nilai default menjadi 5000 milidetik.

 AUTO: {
  Jenis: string,
  Default: 'Salah'
},
AutoTiming: {
  Jenis: string,
  Default: 5000.
} 

26. Inisiasikan Slide Auto

Sekarang kita perlu memulai slide otomatis pada beban komponen. Dalam fungsi 'Mounted ()' Carousel, setelah konten yang ada, periksa apakah properti 'Otomatis' diatur ke 'True'. Jika demikian, buat interval yang memicu metode 'NextSlide ()' berulang kali setelah nilai 'autotiming' telah berlalu.

 Jika (ini.auto === 'Benar') {
  this.autointerval = setterinterval (() = & gt; {
  ini.nextslide ();
  }, parseint (ini.autotifing));
} 

27. Batalkan metode auto-slide

Jelas, kita perlu beberapa cara bagi pengguna untuk menonaktifkan slide otomatis jika mereka telah menyatakan keinginan untuk mengoperasikan korsel secara manual. Langkah pertama menuju ini adalah metode korsel baru yang disebut 'CancelOtoslide'. Ini hanya akan membatalkan interval yang dibuat pada langkah sebelumnya.

 BancilOtoslide () {
   clearinterval (ini.autointerval);
} 

28. Pemicu CancelOtoslide.

Jika pengguna mengklik elemen panah atau kontrol, masuk akal untuk berasumsi bahwa mereka ingin mengoperasikan korsel secara manual, jadi mari kita sebut metode 'CancelOtoslide' jika salah satu elemen ini diklik. Untuk melakukan ini, cukup tambahkan '+ CancelOtoslide ()' ke setiap elemen 'V-on' arahan. Lihat cuplikan di bawah ini untuk contoh menggunakan panah slide 'sebelumnya'.

 V-ON: Klik.Native = "Prevslide () + CancelOtoslide ()" 

29. Lulus nilai ke alat peraga slide otomatis

Akhirnya, mari kita lulus beberapa nilai ke properti slide otomatis yang kami buat. Kembali ke 'app.vue', tambahkan cuplikan di bawah ini ke & lt; aplikasi-carousel & gt; elemen untuk mengaktifkan slide otomatis setiap tiga detik.

 Auto = "benar" waktu otomatis = "3000"

30. Selesai membangun komponen korsel

Batalkan server pengembangan, atau buka jendela terminal baru, dan jalankan 'NPM Run Build' untuk membuat versi yang disusun dan siap produksi vue.js komponen korsel bertenaga di 'dist'.

Artikel ini awalnya diterbitkan dalam penerbitan 269 dari desainer Web Majalah Desain Web Kreatif. Beli masalah 269 di sini atau berlangganan desainer web di sini .

Acara Desain Web menghasilkan London Kembali pada 19-21 September 2018, menawarkan jadwal pembicara terkemuka di industri, seharian lokakarya dan peluang jaringan yang berharga - jangan lewatkan. Dapatkan itu menghasilkan Tiket sekarang .

Artikel terkait:

• 7 alat penting untuk desainer web saat ini
• Tambahkan efek kesalahan ke situs web Anda
• 6 Halaman luar biasa 'tentang' untuk menginspirasi Anda