|
Tout d’abord, la dernière vague de rendus : ![]()
Éléments de baseTout d’abord, les éléments couramment possédés par le composant pager (ci-après appelé le « composant pager ») sont : Les configurations requises pour l’initialisation sont : totalPage initPage Montrer Précédent (s’il faut afficher la page précédente) showNext (s’il faut montrer la page suivante) montrer des objets (quelques pages au milieu) showJump (s’il faut montrer le saut vers la page où il mène)
Celles-ci peuvent être reçues via les accessoires de vue. De plus, le composant pager lui-même doit avoir une page actuelle qui enregistre la page actuelle, le tableau des pages est utilisé pour accueillir le numéro de page affiché au centre, et le jumpPage lie l’entrée du numéro de page de saut. Réalisation de baseLe code correspondant est :
<template>
<div class="pager-wrapper » v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 & showPrev » @click="go(currentPage - 1) » > la page précédente</a>
<a :class="{active : currentPage == 1 ? true : false} » @click="go(1)">1</a>
<fort v-show="pages[0] > 2">...</strong>
<a v-for="page dans les pages » :class="{active : currentPage == page ? true : false} » @click="go(page)">{{page}}</a>
<v-show fort="pages[pages.longueur-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) » > page suivante</a>
</div>
<div v-if="showJump » v-show="totalPage > 1 » class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> page, sauter à</span>
<input type="number » min="1 » :max="totalPage » v-model="jumpPage » class="jump-input">
<span>Page</span>
<a @click="go(jumpPage) » > déterminé</a>
</div>
</div>
</template>
<script>
export par défaut {
accessoires : {
totalPage : { // Nombre total de pages
type : Nombre,
par défaut : 1,
À recommander : Vrai
},
montreItems : { // Nombre de pages affichées, par exemple : 1 ... 34[5]67 ... 10
type : Nombre,
Défaut : 5
},
showPrev : { // s’il faut montrer « Précédent »
type : Booléen,
Par défaut : vrai
},
montreSuivante : { // S’il faut montrer « Suivant »
type : Booléen,
Par défaut : vrai
},
showJump : { // s’il faut montrer « Jump »
type : Booléen,
Par défaut : vrai
},
initPage : {
type : Nombre,
Défaut : 1
}
},
data () {
return {
CurrentPage : 0,
pages : [],
SautPage : 0,
}
},
created() {// assignation currentPage lors de l’initialisation
this.currentPage = this.initPage
}
Méthodes : {
go (page) {
if(page < 1) {
page = 1
}
if(page > this.totalPage) {
page = ce.totalPage
}
if(page === this.currentPage) {
Retour
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
page : this.currentPage
})
}
},
Regardez : {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
L’étape suivante est de savoir comment obtenir la valeur de la page array. Puisque les pages sont toujours fortement liées à la page actuelle et aux showItems qui doivent être affichés dans la configuration, il est tout à fait possible de changer les pages pour une propriété calculée :
computed: {
pages () {
Le tableau des numéros de page est obtenu en fonction des numéros de page de début et de fin
let getPages = (début,fin) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(fin >= this.totalPage || fin < début || fin <= 1) {
fin = ce.totalPage - 1
}
soit arr = []
pour (soit i = commencer ; i <= fin ; i++) {
arr.push(i)
}
retour arr
}
laissons compter = this.showItems
if(this.totalPage < compte + 2) {
retourner 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 {
soit la moitié = Math.ceil(comptes/2) - 1
soit fin = this.currentPage + moitié
si(compte % 2 === 0) {
End++
}
return getPages(this.currentPage - half,end)
}
}
}
}
Expansion fonctionnelleÀ ce stade, un composant classique de tournage de pages est essentiellement implémenté (le style peut être personnalisé seul). Cependant, souvent (notamment pour certains parcours de gestion), combinés à vue-router pour créer un SPA, il existe généralement ces exigences : Après avoir tourné une page dans une certaine liste, cliquez sur un élément pour aller à la page d’édition, et après modification, vous voulez pouvoir revenir à la page avant de sauter.
Cette exigence n’est pas très pratique à mettre en œuvre si vous n’utilisez que le composant de pager ci-dessus. Certaines personnes diront qu’il est acceptable de combiner Vuex, mais dans ce cas, il est nécessaire d’enregistrer le numéro de page avant le saut dans l’État. S’il existe de nombreuses listes de feuilletons de pages, il n’est évidemment pas judicieux d’enregistrer plusieurs pages. Cependant, grâce à l’élégance de l’implémentation Vue-Router, il est facile de répondre aux exigences ci-dessus :
D’abord, ajoutez la configuration de mode sur les props, car lorsque le mode est params, le saut doit savoir sur quelle route il se trouve, donc :
mode: {
type : Corde,
par défaut : 'événement' // 'événement' | 'requête' | « params »
},
routeName: {
type : Corde
}
Ensuite, apportez quelques modifications à la méthode logique de saut réelle go(page) :
go (page) {
if(page < 1) {
page = 1
}
if(page > this.totalPage) {
page = ce.totalPage
}
if(page === this.currentPage) {
Retour
}
this.currentPage = parseInt(page,10)
if(this.mode == 'requête') {
Laissons requête = this.$route.query
query.page = this.currentPage
this.$router.go({query : query})
} else if(this.mode == 'params') {
Soient les params = this.$route.params
params.page = ce.currentPage
this.$router.go({name : this.routeName,params : params})
} else {
this.$emit('go-page',{
page : this.currentPage
})
}
}
Cela complète essentiellement un composant simple et universel de tournage de page, qui ne peut pas être envoyé au dépôt pour que tout le monde puisse l’utiliser.
Le composant de tournage de pages enfin implémenté dans cet article a été publié, et vous pouvez voir une vague de code source :
vue-simple-pager
| 
Publié sur 25/07/2019 16:12:31
|
|
|
