Vue implémente une composante de pagination Vue-Paginiton
Je pense que j'utilise Vue pendant un certain temps, que je ne veux plus opérer directement le DOM. L'expérience de programmation liée aux données est vraiment bonne. Une implémentation d'un composant de pagination.
Le CSS ici ne sera pas publié. Vous pouvez le lire et le télécharger directement sur github: vue-pagination
Prenons d'abord une photo de l'exemple
pochoir
<v> <ul> <li v-if = "showFirstText"> <a v-on: click = "cur -"> page précédente </a> </li> <li v-for = "index in pagenums"> <a v-on: click = "pagechange (index)"> {{index}}} </a> </li> <li V-if = "montré Page </a> </li> <li> <a> Total <i> {{all}} </i> </a> </li> </ul> </div>Avant l'introduction de JS, l'affichage et l'analyse de la page peuvent être simplement sortis directement. {{index}} est le numéro de page, qui nécessite un rendu dynamique.
var app = new Vue ({el: '#app', data: {currentpage: 1, totlepage: 28, visiblepage: 10, msg: ''},})L'appel new Vue ({Paramètre}) est de créer un composant de base, l'attribuer à la variable app.el est l'abréviation de l'élément, positionnant la position du modèle.data est les données. Je connais le nombre total de pages, mais pour afficher le numéro de page, il doit encore être calculé, donc l'affichage du numéro de page est l'attribut de calcul. Nous devons donc utiliser le calcul
calculé: {// Attributs calculés: retournez au tableau de numéro de page, Dirty Check sera automatiquement effectué ici, sans $ watch (); pagenums: function () {// limite de page avant et après l'initialisation var lowpage = 1; var highpage = this.totlepage; var pagearr = []; if (this.totlepage> this.visiblePage) {// Si le nombre total de pages dépasse le nombre de pages visibles, un traitement supplémentaire sera effectué; var subvisiblePage = math.ceil (this.visiblePage / 2); if (this.currentPage> subvisiblePage && this.currentPage <this.totlepage - subvisiblePage +1) {// Traitement de la page normale LowPage LowPage = this.currentPage - subvisiblePage; highpage = this.currentPage + subvisiblePage -1; } else if (this.currentPage <= subvisiblePage) {// Traitement LowPage logique pour les quelques pages précédentes = 1; HighPage = this.VisiblePage; } else {// Traitement LowPage logique pour les dernières pages = this.totlepage - this.visiblePage + 1; highpage = this.totlepage; }} // Après avoir déterminé les limites de la page supérieure et inférieure, vous devez vous préparer à appuyer sur le tableau et à être while (lowpage <= highpage) {pagearr.push (lowpage); LowPage ++; } return pagearr; }},En regardant le modèle HTML, j'ai trouvé la directive V-IF. Il est évident que lorsque le contenu est vrai, il sera sorti et si ce n'est pas le cas.
Se concentrer sur
<li v-for = "index in pagenums" v-bider: class = "{active: currentPage == index}"> <a v-on: click = "pageChange (index)"> {{index}} </a> </li>V-FOR est la boucle de rendu de rendu de sortie des pagènes d'attribut de calcul. Chaque élément enfant de boucle est affecté à l'index V-Bind: classe pour lier la classe. Lorsque vous rendez à la marque d'angle actuelle, ajoutez la classe V-on: cliquez pour lier l'événement. Je passe l'index en tant que paramètre, et je porte un jugement plus tard, et passe l'événement d'événement par défaut.
Ensuite, nous ajoutons le champ Méthodes à l'option VUE
Méthodes: {PageChange: fonction (page) {if (this.currentPage! = page) {this.currentPage = page; this. $ Dispatch ('Page-Change', page); // Communication entre les composants du parent et de l'enfant: ==> Les composants de l'enfant distribuent des événements via $ dipatch (), et le composant parent bubbles et écoute les événements correspondants via V-on: Page-Change; }; }}Interaction composante
Le composant est terminé l'écriture et le problème est que l'utilisateur clique sur la page pour changer. Comment informez-vous d'autres composants pour apporter des modifications correspondantes? Vous pouvez insérer une instruction sous la fonction où le coin de la page change. Mais cette méthode est une approche très médiocre. Disponible
Watch: {CurrentPage: Function (OldValue, NewValue) {Console.log (arguments)}}Observez les données CurrentPage lorsqu'elles changent, avant et après les valeurs peuvent être obtenues. Informez ensuite d'autres composants.
Le code complet se trouve dans GitHub: Vue-Pagination
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.