vue分页插件nuxt分页算法js支持url跳转分页和ajax参数分页

在vue或者nuxt的项目里可能会用到的分页插件. 

url分页效果是通过跳转url的形式来传递页面参数,或者url?page=1等的方法,下面是源码部分,别的需要的自行修改即可.

AppPager.vue

<template>
    <ul class="app-pagination">
        <template v-if="url">
            <li v-show="(current > Math.ceil(showItem / 2)) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${1}`">
                    首页
                </nuxt-link>
            </li>
            <li v-show="current != 1" @click="current--">
                <nuxt-link :to="`${url}${current - 1}`">
                    上一页
                </nuxt-link>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}">
                <nuxt-link :to="`${url}${index}`">
                    {{ index }}
                </nuxt-link>
            </li>
            <li v-show="pageSize * current <= total " @click="current++">
                <nuxt-link :to="`${url}${current + 1}`">
                    下一页
                </nuxt-link>
            </li>
            <li v-show="(current < totalPage) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${totalPage}`">
                    尾页
                </nuxt-link>
            </li>
            <li class="total">
                <a href="javascript:void(0)">共 {{ total }} 条</a>
            </li>
        </template>
        <template v-else>
            <li @click="goto('start')">
                <a href="javascript:void(0)">首页</a>
            </li>
            <li v-show="current != 1" @click="goto('prev')">
                <a href="javascript:void(0)">上一页</a>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}" @click="goto(index)">
                <a href="javascript:void(0)">{{ index }}</a>
            </li>
            <li v-show="totalPage != current && total != 0 && total != current" @click="goto('next')">
                <a href="javascript:void(0)">下一页</a>
            </li>
            <li @click="goto('end')">
                <a href="javascript:void(0)">末页</a>
            </li>
            <li class="total">
                <a href="javascript:void(0)">共 {{ total }} 条</a>
            </li>
        </template>
    </ul>
</template>
<script>
export default {
    name: 'AppPager',
    props: {
        url: { //分页链接
            required: false,
            type: [String],
            default: null
        },
        total: {
            required: false,
            type: [Number],
            default: 0
        },
        page: {
            required: false,
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            current: 1,
            showItem: 5,
            pageSize: 8
        };
    },
    computed: {
        pages() {
            let pag = [];
            // 开始的数字
            let left = 1;
            // 结束的数字
            const totalPage = this.totalPage;
            let right = totalPage;
            let middle = Math.ceil(this.showItem / 2);
            if (totalPage >= this.showItem) {
                // 中间的时候
                // 左右都加上（middle-1)
                if (this.current > middle && this.current < totalPage - (middle - 1)) {
                    left = this.current - (middle - 1);
                    right = this.current + (middle - 1);
                } else {
                    //最左边或者在condition的中间
				    if (this.current <= middle) {
				        left = 1;
				        right = this.showItem;
                        // 最右边的情况
                        // 结束是总条数，开始是condition减去1
				    } else {
				        right = totalPage;
				        left = totalPage - (this.showItem - 1);
				    }
                }
            }
            while (left <= right) {
                pag.push(left);
                left++;
            }

            //总页数
            console.log(pag);
            return pag;
        },

        /**
         * 根据总条数计算总页数
         */
        totalPage() {
            return this.total % this.pageSize ? Math.floor(this.total / this.pageSize) + 1 : this.total / this.pageSize;
        }

    },
    watch: {
        page: {
            handler(old, val) {
                this.current = Number(old);
            },
            immediate: true
        }
    },
    methods: {
        goto(index) {
            if (index == 'start') {
                this.current = 1;
                this.$emit('page', 1);
            } else if (index == 'end') {
                this.current = this.totalPage;
                this.$emit('page', this.totalPage);
            } else if (index == 'prev') {
                this.current--;
                this.$emit('page', this.current);
            } else if (index == 'next') {
                this.current++;
                this.$emit('page', this.current);
            } else {
                this.$emit('page', index);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.app-pagination{
    margin: 40px auto;
    text-align: center;
    li{
        display: inline-block;
        margin: 0 6px;
        a{
            padding: 8px;
            display: inline-block;
            color: #626262;
            &:hover{
                color: #FFB400;
            }
        }
        &.active a{
            color: #FFB400;
        }
        &.total a{
            color: #FFB400;
        }
    }
}
</style>

使用方法 url类型分页:

   <app-pager type="url" url="/tgdiary/" :total="diary.total" :page="1" />

 使用方法 ajax 参数类型分页:

 <app-pager type="ajax":total="diary.total" :page="1" @page="handlePageChange" />  

 methods: {
        handlePageChange(page) {
            console.log(page)
        }
    }

 

效果展示: 

在线体验应用网址：舔狗日记

参考文章: https://www.cnblogs.com/moqiutao/p/6394681.html 

 

修复了一个ajax类型分页的bug,优化代码.如果是url分页只需要传入url即可,如果url参数不存在就默认为ajax分页.触发分页事件.