PC-application/component/common/pagination.js

/**
 * Create with WebStorm
 * Author: Daxiu Huang
 * CreateTime: 2017/9/6 10:21
 */
//分页组件
var pageComponent = Vue.extend({
    template: '<nav v-if="pages>0" aria-label="Page navigation" class="text-center">\
        <ul class="pagination">\
        	<li class="fl" style="line-height:30px;"><div v-if="total" class="c-909090 pr10 fl">共{{total}}条记录</div><div  v-if="total" class="c-333333 pr10 fl">每页{{size}}条</div></li>\
            <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
        },
        total: {
            type: Number,
            default: false
        },
        size: {
            type: Number,
            default: false
        }
    },
    data: function(){
        return{
            curPage:1
        }
    },
    computed: {
        showPageBtn: function() {
            var pageNum = this.pages;
            var index = this.curPage;
            var arr = [];
            if (pageNum <= 5) {
                for (var 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: function(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);