gxytj/gxlbytj/lib/pagination/pagination.html

<template>
    <div class="c-pagination" v-if="total>0">
        <a v-if="hasPrev()" @click="nav(index-1)">上一页</a>
        <a v-else class="c-disable" href="javascript:;" style="visibility:hidden;">上一页</a>
        <a v-for="item in getPageList()" @click="nav(item)" :class="'c-item' + (item===index?' active':'')" :title="item">{{item}}</a>
        <a href="javascript:;" v-if="hasNext()" @click="nav(index+1)">下一页</a>
        <a v-else class="c-disable" href="javascript:;" style="visibility:hidden;">下一页</a>
    </div>
</template>
<script>
    export default {
        props: {
            index: {
                type: Number,
                default: 1
            },
            size: {
                type: Number,
                default: 20
            },
            total: {
                type: Number,
                default: 0
            },
            sizeList: {
                type: Array,
                default: () => [20, 50, 100]
            },
            callback: {
                type: Function
            }
        },
        data: function () {
            return {
                currentIndex: this.index,
                currentSize: this.size
            };
        },
        watch: {
            currentIndex: function (val) {
                this.$emit('update:index', val);
                this.callback();
            },
            currentSize: function (val) {
                this.currentIndex = 1;
                this.$emit('update:size', val);
                this.callback();
            }
        },
        methods: {
            nav: function (index) {
                this.currentIndex = index;
            },
            getPageCount: function () {
                return Math.ceil(this.total / this.size);
            },
            hasPrev: function () {
                return this.index > 1;
            },
            hasNext: function () {
                return this.index < this.getPageCount();
            },
            getPageList: function () {
                var pageCount = this.getPageCount();
                var maxLinks = 10;
                var left = maxLinks / 2;
                var start = this.index - left;
                start = start > 1 ? start : 1;
                var end = this.index + (maxLinks - left - 1);
                end = end > pageCount ? pageCount : end;
                if (start == 1 && end < pageCount) {
                    while (end - start + 1 < maxLinks && end < pageCount) {
                        end++;
                    }
                }
                if (end == pageCount && start > 1) {
                    while (end - start + 1 < maxLinks && start > 1) {
                        start--;
                    }
                }
                var list = [];
                for (var i = start; i <= end; i++) {
                    list.push(i);
                }
                return list;
            }
        }
    };
</script>
<style>
    .c-pagination {
        box-sizing:border-box;
        text-align: center;
        padding: 1.5vh 0;
        height: 10vh;
        position:relative;
    }
        .c-pagination a {
            display: inline-block;
            line-height: 6vh;
            height:6vh;
            padding: 0 2vh;
            margin: 2vh 0;
            text-align: center;
            text-decoration: none;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
        }
            .c-pagination a:hover {
                color: #fff;
            }
        .c-pagination > a:first-child, .c-pagination > a:last-child {
            background-color: #027EFB;
        }
        .c-pagination > a:first-child {
            position: absolute;
            left: 0;
        }
        .c-pagination > a:last-child {
            position: absolute;
            right: 0;
        }
        .c-pagination > a.c-item {
            width: 2vh;
            height: 2vh;
            border-radius: 1vh;
            padding: 0;
            background-color: #ccc;
            margin: 4vh .5vh;
        }
            .c-pagination > a.c-item.active {
                background-color: #027EFB;
            }
</style>