Penjelasan terperinci tentang proses pelaksanaan komponen bar paging dalam dokumen Vue

Vue, sebagai rangka kerja JavaScript yang popular, selalunya perlu menggunakan fungsi halaman semasa pembangunan. Dokumentasi Vue menyediakan komponen bar paging, yang menyediakan pembangun dengan cara yang mudah dan pantas untuk melaksanakan paging. Artikel ini akan memperkenalkan proses pelaksanaan komponen bar paging secara terperinci.

Pertama sekali, dalam dokumentasi rasmi Vue, kita boleh menemui pelaksanaan khusus komponen Penomboran. Dalam komponen, mula-mula perkenalkan komponen Vue dan gaya CSS:

Dalam templat ini, kita boleh melihat perkara utama berikut:

• v-ifdanv-forArahan: Gunakanv-ifuntuk mengawal sama ada halaman sebelumnya dan halaman seterusnya dipaparkan, dan gunakanv-foruntuk melintasi nombor halaman penomboran.
• classIkatan: Ikat gaya (aktif) halaman semasa melaluiv-bind:class. Perintah
• @click.prevent: Gunakan@click.preventuntuk memantau acara klik nombor halaman penomboran.
• {{}}teg: Gunakan teg{{}}untuk memaparkan nombor halaman penomboran.

Mari kita analisa perkara penting ini satu persatu di bawah.

Kawalan halaman sebelumnya dan seterusnya

Pertama, kita perlu menentukan sama ada halaman sebelumnya dan halaman seterusnya perlu dipaparkan berdasarkan nombor halaman semasa. Mengikut pelaksanaanv-ifdalam templat, kita boleh tahu bahawav-if="current_page > 1"bermaksud butang halaman sebelumnya akan dipaparkan hanya apabila nombor halaman semasa lebih besar daripada 1.

Begitu juga,v-if="current_page < last_page"bermakna butang halaman seterusnya akan dipaparkan hanya apabila nombor halaman semasa kurang daripada nombor halaman maksimum.

Perjalanan nombor halaman

Seterusnya, kita perlu memaparkan senarai nombor halaman pada halaman tersebut. Mengikut pelaksanaanv-fordalam templat, kita boleh tahu bahawav-for="page in pages"dalampagesialah tatasusunan yang dikembalikan dalam sifat pengiraan Vue (dikira).

Di sini kita perlu mengira jumlah halaman yang ada dan nombor halaman mana yang perlu dipaparkan dalam senarai nombor halaman. Kami menggunakan sifat pengiraan Vue untuk mencapai ini:

computed: { pages: function() { var pages = []; for (var i = this.current_page - this.offset; i <= this.current_page + this.offset; i++) { if (i > 0 && i <= this.last_page) { pages.push(i); } } return pages; } }

di mana,pagesialah senarai nombor halaman,current_pageialah nombor halaman semasa danlast_pageialah nombor halaman maksimum.offsetialah offset, menunjukkan bilangan nombor halaman yang dipaparkan di kiri dan kanan nombor halaman semasa.

Melalui pengiraan, kami mendapat nombor halaman mana yang perlu dipaparkan dalam senarai nombor halaman. Kemudian gunakanv-fordalam templat untuk melintasi nombor halaman yang dikira dan memaparkan senarai pada halaman.

Pengikatan gaya

Untuk menjadikan gaya nombor halaman semasa unik, kita perlu menambah kelas yang ditentukan pada halaman semasa dalam templat. Dalam templat, kami menggunakanv-bind:classuntuk mencapai fungsi ini.

 @{{ page }} 

Dalam kod ini,v-bind:classmengikat tatasusunan. Terdapat dua elemen dalam tatasusunan. Yang pertama adalah untuk menentukan sama ada nombor halaman semasa adalah sama dengan nombor halaman yang dilalui Jika ia sama, ikat kelasactiveuntuk mewakili nombor halaman semasa. Jika tidak sama, ikat kelas rentetan kosong. Dengan cara ini, kita boleh mengikat gaya yang ditentukan pada nombor halaman semasa.

Pemantauan acara klik

Apabila pengguna mengklik pada nombor halaman, kami perlu mendapatkan nombor halaman dan melakukan lompatan atau permintaan data yang sepadan. Dalam Vue, kami menggunakan@click.preventuntuk mendaftarkan acara klik dan menghalang tingkah laku lalai.

@{{ page }}

changePagedi sini ialah kaedah, kami mentakrifkan kaedah ini dalam contoh Vue.

methods: { changePage: function(page) { this.current_page = page; this.$emit('page-changed', page); } }

Dalam kaedah ini, kami mengemas kini nombor halaman semasa dan mencetuskan (mengeluarkan) acara tersuaipage-changed. Melalui acara tersuai ini, kami boleh mendengar acara dalam komponen induk dan melaksanakan operasi khusus.

Ringkasan

Melalui analisis di atas, kita dapat melihat bahawa pelaksanaan komponen bar paging Vue adalah agak mudah. Tetapi dengan menguasai prinsip asas komponen ini, kami boleh menggunakan rangka kerja Vue dengan lebih mahir, dan dapat menggunakan fungsi paging dengan lebih fleksibel dan mudah dalam pembangunan sebenar.

Atas ialah kandungan terperinci Penjelasan terperinci tentang proses pelaksanaan komponen bar paging dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!