Pratique des composants Vue : développement de composants de pagination

Pratique des composants Vue : développement de composants de pagination

Introduction

Dans les applications Web, la fonction de pagination est un composant essentiel. Un bon composant de pagination doit être simple et clair dans sa présentation, riche en fonctions et facile à intégrer et à utiliser.

Dans cet article, nous présenterons comment utiliser le framework Vue.js pour développer un composant de pagination hautement personnalisable. Nous expliquerons en détail comment développer à l'aide des composants Vue à travers des exemples de code.

Pile technologique

• Vue.js 2.x
• JavaScript (ES6)
• HTML5 et CSS3

Environnement de développement

• Node.js v8.9.3
• npm v5.5.1
• V ue.js v2 .5.2

Exigences du composant de pagination

• Recevoir le nombre total de pages (total) et le nombre actuel de pages (actuel) via les accessoires
• Vous pouvez configurer le nombre maximum de pages affichées (maxShown)
• Vous pouvez configurez le texte affiché par le bouton (prevText et nextText) et le style du bouton
• Cliquez sur le numéro de page pour passer à la page correspondante
• Le numéro de la page actuelle est mis en surbrillance
• Lorsque la page actuelle n'a pas de page précédente, le clic l'événement du bouton de la page précédente est ignoré
• Lorsque la page actuelle n'a pas de page suivante, ignorez l'événement de clic du bouton de la page suivante

Idées de conception et implémentation du code

Selon les besoins, nous divisons le composant de pagination en plusieurs petits composants pour la mise en œuvre. Nous devons créer les 3 petits composants suivants :

1. Pagination.vue

composant de pagination principal, qui est responsable du traitement des données et de la logique de pagination. Transmettez les informations de pagination aux composants enfants et répondez aux événements des composants enfants.

2. Button.vue

Ce composant est un composant bouton, utilisé pour créer des boutons de pagination.

3. Page.vue

Ce composant est utilisé pour créer un bloc de page unique, comprenant l'étiquette et le statut de la page. Un bloc de page peut être la page actuelle ou une page non actuelle.

Ensuite, utilisons du code pour implémenter les 3 composants ci-dessus.

1. Pagination.vue

<template>
  <div class="pagination-container">
    <button-prev :current="current" @onPrev="prev"></button-prev>
    <page v-for="page in pages"
      :key="page"
      :page="page"
      :is-selected="page === current"
      @on-page-selected="selectPage"></page>
    <button-next :current="current" :total="total" @onNext="next"></button-next>
  </div>
</template>
<script>
import ButtonPrev from './ButtonPrev.vue';
import ButtonNext from './ButtonNext.vue';
import Page from './Page.vue';

export default {
  components: { ButtonPrev, ButtonNext, Page },
  props: {
    total: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 1
    },
    maxShown: {
      type: Number,
      default: 5
    },
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    }
  },
  computed: {
    pages () {
      const start = Math.max(1, this.current - Math.floor(this.maxShown / 2));
      const end = Math.min(this.total, start + this.maxShown - 1);
      return Array.from({ length: end - start + 1 }, (v, k) => start + k);
    }
  },
  methods: {
    selectPage (page) {
      if (this.current === page) return;
      this.current = page;
      this.$emit('onPageChanged', page);
    },
    prev () {
      if (this.current > 1) {
        this.selectPage(this.current - 1);
      }
    },
    next () {
      if (this.current < this.total) {
        this.selectPage(this.current + 1);
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous importons d'abord les composants ButtonPrev, ButtonNext et Page. Ensuite, les attributs total, current, maxShown, prevText et nextText sont obtenus à l'aide d'accessoires, et les pages d'attributs calculées sont définies en fonction du numéro de page actuel (current) et du numéro de page maximum (maxShown), un tableau contenant le numéro de page. est obtenu à utiliser dans le composant Present.

Nous définissons également la méthode selectPage, dans laquelle si le numéro de page (page) est le même que le numéro de page actuel (current), renvoie ou ne fait rien. Sinon, le nouveau numéro de page est émis vers le composant parent.

Les méthodes prev() et next() sont utilisées pour gérer les événements de la page précédente et de la page suivante et empêcher la réponse aux événements.

2. ButtonPrev.vue

<template>
    <button
      class="btn-previous"
      :disabled="current === 1"
      @click="onPrev()">
      {{ prevText }}
    </button>
</template>

<script>
export default {
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    current: {
      type: Number,
      default: 1
    }
  },
  methods: {
    onPrev () {
      this.$emit('onPrev');
    }
  }
}
</script>

<style scoped>
.btn-previous {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-right: 5px;
  background-color:#fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-previous:disabled {
  color: #ccc;
  cursor: default;
}
</style>

Dans le code ci-dessus, nous obtenons d'abord le numéro de page actuel (current) et les attributs de texte (prevText) du bouton de la page précédente via des accessoires. Dans le modèle, utilisez la liaison de classe (désactivée) pour contrôler l'état d'utilisation du bouton. Une méthode onPrev est définie, qui déclenche l'événement onPrev du composant parent.

3. ButtonNext.vue

<template>
    <button
      class="btn-next"
      :disabled="current === total"
      @click="onNext()">
      {{ nextText }}
    </button>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 10
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    current: {
      type: Number,
      default: 1
    }
  },
  methods: {
    onNext () {
      this.$emit('onNext');
    }
  }
}
</script>

<style scoped>
.btn-next {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-left: 5px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-next:disabled {
  color: #ccc;
  cursor: default;
}
</style>

Dans le code ci-dessus, nous avons copié le code de ButtonPrev.vue et légèrement modifié le texte et les conditions de jugement.

4. Page.vue

<template>
  <button :class="{ current: isSelected }" class="btn-page" @click="onPageSelected(page)">
    {{ page }}
  </button>
</template>

<script>
export default {
  props: {
    page: {
      type: Number,
      required: true
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onPageSelected () {
      this.$emit('onPageSelected', this.page);
    }
  }
}
</script>

<style scoped>
.btn-page {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-left: 5px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-page.current {
  background-color: #0078d7;
  color: #fff;
}
</style>

Dans le code ci-dessus, nous avons obtenu la valeur du numéro de page (page) et l'attribut isSelected du bouton via les accessoires. Dans le modèle, utilisez la liaison de classe (« actuelle ») pour mettre en surbrillance la page sélectionnée.

Nous définissons également une méthode onPageSelected, qui déclenche l'événement onPageSelected du composant parent.

Enfin, ces composants peuvent être utilisés dans un modèle dans n'importe quelle application Vue.js, comme indiqué ci-dessous :

<template>
  <div>
    <pagination
      :total="total"
      :current="current"
      :maxShown="maxShown"
      :prevText="prevText"
      :nextText="nextText"
      @onPageChanged="onPageChanged"></pagination>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },
  data () {
    return {
      current: 1,
      maxShown: 10,
      prevText: '上一页',
      nextText: '下一页',
      total: 10,
      pageSize: 10,
      items: [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]
    }
  },
  methods: {
    onPageChanged (page) {
      console.log('Page changed to: ', page);
      // 当前页面数据请求
    }
  }
}
</script>

Dans le code ci-dessus, nous avons introduit le composant Pagination et en avons fait un composant parent dans le modèle. Nous lions également total, current et maxShown au composant pour obtenir leurs valeurs. Dans la méthode onPageChanged, nous pouvons gérer l'événement de changement de page et demander les données correspondantes en fonction du numéro de page actuel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!