|
Öncelikle, renderlemelerin son dalgası: ![]()
Temel unsurlarÖncelikle, pager bileşeninin (bundan sonra "pager bileşeni" olarak adlandırılır) tarafından yaygın olarak sahip olunan unsurlar şunlardır: Başlatma için gerekli konfigürasyonlar şunlardır: totalPage initPage showPrev (önceki sayfayı gösterip göstermemesi) showNext (bir sonraki sayfayı gösterip göstermemesi) showItems (ortada birkaç sayfa) showJump (atlamanın hangi sayfaya gideceği gösterilip gösterilmediği)
Bunlar Vue'nin aksesuarlarıyla alınabilir. Ayrıca, pager bileşeninin mevcut sayfayı kaydeden bir currentPage'e sahip olması gerekir; sayfa dizisi ortada gösterilen sayfa numarasını karşılamak için kullanılır ve jumpPage, sıçrama sayfa numarası girişini bağlar. Temel farkındalıkİlgili kod şudur:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > önceki sayfa</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="sayfa içindeki sayfa" :class="{active: currentPage == page ? 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)" > sonraki sayfa</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> sayfası, atla</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
sayfa <span></span>
<a @click="go(jumpPage)" > belirlendi</a>
</div>
</div>
</template>
<script>
export default {
Aksesuarlar: {
totalPage: { // Toplam sayfa sayısı
tip: Sayı,
Varsayılan: 1,
Gerekli: Doğru
},
showItems: { // Görüntülenen sayfa sayısı, örneğin: 1 ... 34[5]67 ... 10
tip: Sayı,
Varsayılan: 5
},
showPrev: { // "Önceki" gösterip gösterilmemesi
tür: Boolean,
Varsayılan: Doğru
},
showNext: { // "Next" gösterilip gösterilmemesi gerekmiyor mu
tür: Boolean,
Varsayılan: Doğru
},
showJump: { // "Jump" gösterilip gösterilmemesi
tür: Boolean,
Varsayılan: Doğru
},
initPage: {
tip: Sayı,
Varsayılan: 1
}
},
veri () {
return {
currentPage: 0,
sayfalar: [],
jumpPage: 0,
}
},
created() {// currentPage atama başlatma sırasında
this.currentPage = this.initPage
}
Yöntemler: {
Go (sayfa) {
if(sayfa < 1) {
sayfa = 1
}
if(page > this.totalPage) {
sayfa = this.totalPage
}
if(page === this.currentPage) {
Dönüş
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
sayfa: this.currentPage
})
}
},
İzle: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Sonraki adım, sayfa dizisi değerini nasıl elde edeceğimizdir. Sayfalar her zaman mevcut sayfa ve yapılandırmada gösterilmesi gereken showItems ile güçlü bir ilişkiye sahip olduğundan, sayfaları hesaplanan bir özelliğe dönüştürmek tamamen mümkündür:
computed: {
sayfalar () {
Sayfa numarası dizisi, başlangıç ve son sayfa numaralarına göre elde edilir
let getPages = (start,son) => {
if(start <= 1 || start > end || start >= this.totalPage) {
başlangıç = 2
}
if(end >= this.totalPage || son < başlangıç || son <= 1) {
son = this.totalPage - 1
}
Arr = []
for(let i = start; i <= son; i++) {
arr.push(i)
}
Return AR
}
sayalım = this.showItems
if(this.totalPage < sayılır + 2) {
getPages(2,this.totalPage) geri döndürün;
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
get Pages(2, sayı) geri döndür
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages(this.totalPage + 1 - sayılır, bu.totalPage - 1)
} else {
yarı = Math.ceil(sayı/2) - 1
let end = this.currentPage + half
if(sayılır % 2 === 0) {
son++
}
get Pages(this.currentPage - yarısı, son) geri dön
}
}
}
}
Fonksiyonel genişlemeBu noktada, temel olarak sıradan bir sayfa çevirme bileşeni uygulanır (stil kendi kendine özelleştirilebilir). Ancak, çoğu zaman (özellikle bazı yönetim geçmişlerinde), SPA oluşturmak için vue-router ile birlikte genellikle böyle gereksinimler vardır: Belirli bir listedeki bir sayfaya geçtikten sonra, düzenleme sayfasına gitmek için bir öğeye tıklayın ve düzenlemeden sonra atlamadan önce sayfaya geri dönebilmek istersiniz.
Bu gereklilik, sadece yukarıdaki pager bileşenini kullanırsanız uygulanması pek kolay değildir. Bazı kişiler vuex'i birleştirmenin uygun olduğunu söyleyebilir, ancak bu durumda eyalette geçişten önce sayfa numarası kaydedilmelidir. Eğer çok sayıda sayfa çevirme listesi varsa, birden fazla sayfa kaydetmek açıkça zarif değildir. Ancak, Vue-Router uygulamasının zarafeti nedeniyle yukarıdaki gereksinimleri karşılamak kolaydır:
Öncelikle, mod konfigürasyonunu prop üzerinde ekleyin, çünkü mod params olduğunda, atlamanın hangi rotada olduğunu bilmesi gerekir, yani:
mode: {
tip: Ip,
Varsayılan: 'olay' // 'olay' | 'sorgu' | 'params'
},
routeName: {
tür: String
}
Sonra gerçek atlama mantığı yönteminde bazı değişiklikler yapın go(page):
Go (sayfa) {
if(sayfa < 1) {
sayfa = 1
}
if(page > this.totalPage) {
sayfa = this.totalPage
}
if(page === this.currentPage) {
Dönüş
}
this.currentPage = parseInt(page,10)
if(this.mode == 'sorgu') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({sorgu: sorgu})
} else if(this.mode == 'params') {
params = this.$route.params
params.page = this.currentPage
this.$router.go({name: this.routeName,params: params})
} else {
this.$emit('go-page',{
sayfa: this.currentPage
})
}
}
Bu temelde herkesin kullanabilmesi için depoya gönderilemeyen basit ve evrensel bir sayfa çevirme bileşenini tamamlar.
Bu makalede nihayet uygulanan sayfa çevirme bileşeni yayımlandı ve bir kaynak kodu dalgası görebilirsiniz:
Vue-simple-pager
| 
Yayınlandı 25.07.2019 16:12:31
|
|
|
