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:

<template>
  <nav>
    <ul class="pagination">
      <li v-if="current_page > 1">
        <a href="" aria-label="Previous"
           @click.prevent="changePage(current_page - 1)">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li v-for="page in pages"
          v-bind:class="[ page == current_page ? 'active' : '' ]">
        <a href=""
           @click.prevent="changePage(page)">@{{ page }}</a>
      </li>
      <li v-if="current_page < last_page">
        <a href="" aria-label="Next"
           @click.prevent="changePage(current_page + 1)">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<style>
  .pagination li {
    cursor: pointer;
  }
  .pagination li.active span {
    background-color: #3490dc;
    color: #fff;
    border-color: #3490dc;
  }
</style>

Dalam templat ini, kita boleh melihat perkara utama berikut:

• v-if dan v-for Arahan: Gunakan v-if untuk mengawal sama ada halaman sebelumnya dan halaman seterusnya dipaparkan, dan gunakan v-for untuk melintasi nombor halaman penomboran.
• class Ikatan: Ikat gaya (aktif) halaman semasa melalui v-bind:class. Perintah
• @click.prevent: Gunakan @click.prevent untuk 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 pelaksanaan v-if dalam templat, kita boleh tahu bahawa v-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 pelaksanaan v-for dalam templat, kita boleh tahu bahawa v-for="page in pages" dalam pages ialah 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, pages ialah senarai nombor halaman, current_page ialah nombor halaman semasa dan last_page ialah nombor halaman maksimum. offset ialah 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 gunakan v-for dalam 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 menggunakan v-bind:class untuk mencapai fungsi ini.

<li v-for="page in pages"
    v-bind:class="[ page == current_page ? 'active' : '' ]">
  <a href=""
     @click.prevent="changePage(page)">@{{ page }}</a>
</li>

Dalam kod ini, v-bind:class mengikat 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 kelas active untuk 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.prevent untuk mendaftarkan acara klik dan menghalang tingkah laku lalai.

<a href=""
   @click.prevent="changePage(page)">@{{ page }}</a>

changePage di 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 tersuai page-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!