|
Πρώτα απ 'όλα, το τελευταίο κύμα αποδόσεων: ![]()
Βασικά στοιχείαΠρώτα απ 'όλα, τα στοιχεία που ανήκουν συνήθως στο στοιχείο τηλεειδοποίησης (εφεξής «στοιχείο τηλεειδοποίησης») είναι: Οι διαμορφώσεις που απαιτούνται για την προετοιμασία είναι: σύνολοΣελίδα initPage showPrev (αν θα εμφανίζεται η προηγούμενη σελίδα) showNext (αν θα εμφανιστεί η επόμενη σελίδα) showItems (μερικές σελίδες στη μέση) showJump (αν θα εμφανίζεται η μεταπήδηση σε ποια σελίδα πηγαίνει)
Αυτά μπορούν να ληφθούν μέσω των σκηνικών του vue. Επιπλέον, το ίδιο το στοιχείο τηλεειδοποίησης πρέπει να έχει μια τρέχουσα σελίδα που καταγράφει την τρέχουσα σελίδα, ο πίνακας σελίδων χρησιμοποιείται για να φιλοξενήσει τον αριθμό σελίδας που εμφανίζεται στη μέση και το jumpPage δεσμεύει την είσοδο αριθμού σελίδας μετάβασης. Βασική υλοποίησηΟ αντίστοιχος κωδικός είναι:
<template>
<div class="περιτύλιγμα τηλεειδοποίησης" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > την προηγούμενη σελίδα</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="σελίδες[0] > 2">...</strong>
<a v-for="σελίδα σε σελίδες" :class="{active: currentPage == σελίδα ? 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)" > επόμενη σελίδα</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Σύνολο <em class="jump-total">{{totalPage}}</em> σελίδα, μετάβαση στο</span>
<input type="αριθμός" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>σελίδα</span>
<a @click="go(jumpPage)" > καθοριστεί</a>
</div>
</div>
</template>
<script>
Εξαγωγή προεπιλογής {
Στηρίγματα: {
totalPage: { // Συνολικός αριθμός σελίδων
τύπος: Αριθμός,
προεπιλογή: 1,
Απαιτείται: True
},
showItems: { // Αριθμός σελίδων που εμφανίζονται, π.χ.: 1 ... 34[5]67 ... 10
τύπος: Αριθμός,
Προεπιλογή: 5
},
showPrev: { // αν θα εμφανίζεται το "Προηγούμενο"
τύπος: Boolean,
προεπιλογή: true
},
showNext: { // Αν θα εμφανίζεται το "Next"
τύπος: Boolean,
προεπιλογή: true
},
showJump: { // αν θα εμφανιστεί το "Jump"
τύπος: Boolean,
προεπιλογή: true
},
initPage: {
τύπος: Αριθμός,
Προεπιλογή: 1
}
},
Δεδομένα () {
επιστροφή {
currentΣελίδα: 0,
σελίδες: [],
jumpPage: 0,
}
},
created() {// currentPage ανάθεση κατά την προετοιμασία
this.currentPage = this.initPage
}
Μέθοδοι: {
go (σελίδα) {
if(σελίδα < 1) {
σελίδα = 1
}
if(σελίδα > this.totalPage) {
σελίδα = this.totalPage
}
if(page === this.currentPage) {
Επιστροφή
}
this.currentPage = parseInt(σελίδα,10)
this.$emit('go-page',{
σελίδα: this.currentPage
})
}
},
Παρακολουθήστε: {
currentPage (newVal) {
this.jumpPage = νέοVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
Το επόμενο βήμα είναι πώς να λάβετε την τιμή του πίνακα σελίδων. Δεδομένου ότι οι σελίδες σχετίζονται πάντα στενά με την τρέχουσα σελίδα και τα showItems που πρέπει να εμφανίζονται στη διαμόρφωση, είναι απολύτως δυνατή η αλλαγή σελίδων σε μια υπολογιζόμενη ιδιότητα:
computed: {
σελίδες () {
Ο πίνακας αριθμών σελίδας λαμβάνεται με βάση τους αριθμούς σελίδας έναρξης και λήξης
έστω getPages = (έναρξη,τέλος) => {
if(έναρξη <= 1 || έναρξη > τέλος || έναρξη >= this.totalPage) {
έναρξη = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
end = this.totalPage - 1
}
έστω arr = []
for(έστω i = έναρξη; i <= τέλος· i++) {
arr.push(i)
}
επιστροφή arr
}
let counts = this.showItems
if(this.totalPage < counts + 2) {
επιστροφή getPages(2,this.totalPage)
} αλλιώς {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
επιστροφή getPages(this.totalPage + 1 - counts,this.totalPage - 1)
} αλλιώς {
έστω μισό = Math.ceil(counts/2) - 1
let end = this.currentPage + μισό
if(μετράει % 2 === 0) {
τέλος++
}
επιστροφή getPages(this.currentPage - μισό,τέλος)
}
}
}
}
Λειτουργική επέκτασηΣε αυτό το σημείο, υλοποιείται βασικά ένα συνηθισμένο στοιχείο αλλαγής σελίδας (το στυλ μπορεί να προσαρμοστεί από μόνο του). Ωστόσο, πολλές φορές (ειδικά ορισμένα υπόβαθρα διαχείρισης), σε συνδυασμό με το vue-router για τη δημιουργία ενός SPA, υπάρχουν συνήθως τέτοιες απαιτήσεις: Αφού μεταβείτε σε μια σελίδα σε μια συγκεκριμένη λίστα, κάντε κλικ σε ένα στοιχείο για να μεταβείτε στη σελίδα επεξεργασίας και μετά την επεξεργασία, θέλετε να μπορείτε να επιστρέψετε στη σελίδα πριν μεταβείτε.
Αυτή η απαίτηση δεν είναι πολύ βολικό να εφαρμοστεί εάν χρησιμοποιείτε μόνο το παραπάνω στοιχείο τηλεειδοποίησης. Μερικοί άνθρωποι μπορεί να πουν ότι είναι εντάξει να συνδυάσετε το vuex, αλλά σε αυτήν την περίπτωση είναι απαραίτητο να καταγράψετε τον αριθμό σελίδας πριν από το άλμα στην κατάσταση. Εάν υπάρχουν πολλές λίστες αναστροφής σελίδων, προφανώς δεν είναι κομψό να καταγράφετε πολλές σελίδες. Ωστόσο, λόγω της κομψότητας της υλοποίησης του Vue-Router, είναι εύκολο να ικανοποιηθούν οι παραπάνω απαιτήσεις:
Αρχικά, προσθέστε τη διαμόρφωση λειτουργίας στα στηρίγματα, επειδή όταν η λειτουργία είναι παράμετροι, το άλμα πρέπει να γνωρίζει σε ποια διαδρομή βρίσκεται, οπότε:
mode: {
τύπος: String,
Προεπιλογή: 'Event' // 'Event' | «Ερώτημα» | «Παράμετροι»
},
routeName: {
τύπος: String
}
Στη συνέχεια, κάντε μερικές αλλαγές στην πραγματική μέθοδο λογικής άλματος go(page):
go (σελίδα) {
if(σελίδα < 1) {
σελίδα = 1
}
if(σελίδα > this.totalPage) {
σελίδα = this.totalPage
}
if(page === this.currentPage) {
Επιστροφή
}
this.currentPage = parseInt(σελίδα,10)
if(this.mode == 'ερώτημα') {
let query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
έστω params = this.$route.params
params.page = this.currentPage
this.$router.go({όνομα: this.routeName,params: params})
} αλλιώς {
this.$emit('go-page',{
σελίδα: this.currentPage
})
}
}
Αυτό ουσιαστικά ολοκληρώνει ένα απλό και καθολικό στοιχείο περιστροφής σελίδας, το οποίο δεν μπορεί να σταλεί στο αποθετήριο για χρήση από όλους.
Το στοιχείο αλλαγής σελίδας που εφαρμόστηκε τελικά σε αυτό το άρθρο κυκλοφόρησε και μπορείτε να δείτε ένα κύμα πηγαίου κώδικα:
vue-simple-pager
| 
Δημοσιεύτηκε στις 25/7/2019 4:12:31 μ.μ.
|
|
|
