Vue-Komponentenpraxis: Entwicklung von Paging-Komponenten
Einführung
In Webanwendungen ist die Paging-Funktion eine wesentliche Komponente. Eine gute Paginierungskomponente sollte einfach und klar in der Darstellung sein, reich an Funktionen und leicht zu integrieren und zu verwenden sein.
In diesem Artikel stellen wir vor, wie Sie mit dem Vue.js-Framework eine hochgradig anpassbare Paging-Komponente entwickeln. Wir erklären anhand von Codebeispielen ausführlich, wie man mit Vue-Komponenten entwickelt.
Technologie-Stack
Entwicklungsumgebung
Paginierungskomponentenanforderungen
<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>
prev() und next() werden verwendet, um Ereignisse der vorherigen und nächsten Seite zu verarbeiten und zu verhindern, dass auf Ereignisse reagiert wird.
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>
<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>
<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>
Schließlich können diese Komponenten in einer Vorlage in jeder Vue.js-Anwendung verwendet werden, wie unten gezeigt:
<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>
Im obigen Code haben wir die Paginierungskomponente eingeführt und sie zu einer übergeordneten Komponente in der Vorlage gemacht. Wir binden außerdem total, current und maxShown an die Komponente, um deren Werte zu erhalten. In der onPageChanged-Methode können wir das Seitenwechselereignis verarbeiten und die entsprechenden Daten basierend auf der aktuellen Seitennummer anfordern.
Das obige ist der detaillierte Inhalt vonVue-Komponentenpraxis: Entwicklung von Paging-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!