|
Pertama-tama, gelombang terakhir rendering: ![]()
Elemen dasarPertama-tama, elemen yang umumnya dimiliki oleh komponen pager (selanjutnya disebut sebagai "komponen pager") adalah: Konfigurasi yang diperlukan untuk inisialisasi adalah: totalHalaman initPage showPrev (apakah akan menampilkan halaman sebelumnya) showNext (apakah akan menampilkan halaman berikutnya) showItems (beberapa halaman di tengah) showJump (apakah akan menampilkan lompatan ke halaman mana yang akan dituju)
Ini dapat diterima melalui alat peraga vue. Selain itu, komponen pager itu sendiri harus memiliki currentPage yang merekam halaman saat ini, array pages digunakan untuk mengakomodasi nomor halaman yang ditampilkan di tengah, dan jumpPage mengikat input nomor halaman lompat. Realisasi dasarKode yang sesuai adalah:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="halaman pager">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > halaman sebelumnya</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="halaman di halaman" :class="{active: currentPage == halaman ? true : false}" @click="go(page)">{{page}}</a>
<strong v-show="pages[pages.length-1] < totalPage - 1">...</strong>
<a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>
<a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > halaman berikutnya</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total halaman <em class="jump-total">{{totalPage}}</em>, lompat ke</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>halaman</span>
<a @click="go(jumpPage)" > ditentukan</a>
</div>
</div>
</template>
<script>
Ekspor default {
alat peraga: {
totalPage: { // Jumlah total halaman
jenis: Nomor,
default: 1,
Diperlukan: Benar
},
showItems: { // Jumlah halaman yang ditampilkan, misalnya: 1 ... 34[5]67 ... 10
jenis: Nomor,
Standar: 5
},
showPrev: { // apakah akan menampilkan "Sebelumnya"
jenis: Boolean,
default: true
},
showNext: { // Apakah akan menampilkan "Next"
jenis: Boolean,
default: true
},
showJump: { // apakah akan menampilkan "Jump"
jenis: Boolean,
default: true
},
initPage: {
jenis: Nomor,
Default: 1
}
},
data () {
Kembali {
currentHalaman: 0,
halaman: [],
lompatHalaman: 0,
}
},
created() {// currentPage pada inisialisasi
this.currentPage = this.initPage
}
Metode: {
pergi (halaman) {
if(halaman < 1) {
halaman = 1
}
if(halaman > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Kembali
}
this.currentPage = parseInt(halaman,10)
this.$emit('go-page',{
halaman: this.currentPage
})
}
},
menonton: {
currentPage (newVal) {
this.jumpPage = NewVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Langkah selanjutnya adalah cara mendapatkan nilai array halaman. Karena halaman selalu sangat terkait dengan halaman saat ini dan showItems yang perlu ditampilkan dalam konfigurasi, sangat mungkin untuk mengubah halaman menjadi properti terhitung:
computed: {
halaman () {
Array nomor halaman diperoleh berdasarkan nomor halaman awal dan akhir
let getPages = (mulai,akhir) => {
if(start <= 1 || start > end || start >= this.totalPage) {
mulai = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
end = this.totalPage - 1
}
biarkan arr = []
for(biarkan saya = mulai; i <= akhir; i++) {
arr.push(i)
}
Kembalikan Arr
}
let counts = this.showItems
if(this.totalPage < counts + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} else {
biarkan setengah = Math.ceil(counts/2) - 1
let end = this.currentPage + setengah
if(hitung % 2 === 0) {
akhir++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Ekspansi fungsionalPada titik ini, komponen membalik halaman biasa pada dasarnya diimplementasikan (gaya dapat disesuaikan dengan sendirinya). Namun, berkali-kali (terutama beberapa latar belakang manajemen), dikombinasikan dengan vue-router untuk membuat SPA, biasanya ada persyaratan seperti: Setelah membalik ke halaman dalam daftar tertentu, klik item untuk pergi ke halaman edit, dan setelah mengedit, Anda ingin dapat kembali ke halaman sebelum melompat.
Persyaratan ini tidak terlalu nyaman untuk diterapkan jika Anda hanya menggunakan komponen pager di atas. Beberapa orang mungkin mengatakan bahwa tidak apa-apa untuk menggabungkan vuex, tetapi dalam hal ini perlu untuk mencatat nomor halaman sebelum lompatan dalam keadaan tersebut. Jika ada banyak daftar flip halaman, jelas tidak elegan untuk merekam banyak halaman. Namun, karena keanggunan implementasi Vue-Router, mudah untuk memenuhi persyaratan di atas:
Pertama, tambahkan konfigurasi mode pada alat peraga, karena ketika mode adalah param, lompatan perlu mengetahui rute mana yang dituju, jadi:
mode: {
jenis: String,
default: 'event' // 'event' | 'Kueri' | 'Param'
},
routeName: {
jenis: String
}
Kemudian buat beberapa perubahan dalam metode logika lompatan yang sebenarnya go(page):
pergi (halaman) {
if(halaman < 1) {
halaman = 1
}
if(halaman > this.totalPage) {
page = this.totalPage
}
if(page === this.currentPage) {
Kembali
}
this.currentPage = parseInt(halaman,10)
if(this.mode == 'query') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
let params = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
this.$emit('go-page',{
halaman: this.currentPage
})
}
}
Ini pada dasarnya melengkapi komponen pembutaran halaman yang sederhana dan universal, yang tidak dapat dikirim ke repositori untuk digunakan semua orang.
Komponen pembalik halaman yang akhirnya diterapkan dalam artikel ini telah dirilis, dan Anda dapat melihat gelombang kode sumber:
vue-simple-pager
| 
Diposting pada 25/07/2019 16.12.31
|
|
|
