pagination.js

var pageComponent = Vue.extend({
template: <nav aria-label="Page navigation"> <ul class="pagination"> <li :class="{\'disabled\':curPage==1}"> <a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li v-for="page in showPageBtn" :class="{\'active\':page==curPage}"> <a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a> <a href="javascript:;" v-else>···</a> </li> <li :class="{\'disabled\':curPage==pages}"> <a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>, props: {pages: {type: Number, default: 1}, current: {type: Number, default: 1}}, data() {
return {curPage: 1}
}, computed: {
showPageBtn() {
let pageNum = this.pages;
let index = this.curPage;
let arr = [];
if (pageNum <= 5) {
for (let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
if (index <= 2) return [1, 2, 3, 0, pageNum];
if (index >= pageNum - 1) return [1, 0, pageNum - 2, pageNum - 1, pageNum];
if (index === 3) return [1, 2, 3, 4, 0, pageNum];
if (index === pageNum - 2) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 1, index, index + 1, 0, pageNum];
}
}, methods: {
goPage(page) {
if (page != this.curPage) {
console.log(page);
this.curPage = page;
this.$emit(‘navpage’, this.curPage);
} else {
console.log(‘Already in the current page’);
}
}
}
});
//全局组件注册
Vue.component(‘navigation’, pageComponent);