基于vue实现分页/翻页组件paginator

项目背景

作列表页时,不可避免会用到分页,亲爱的们啊,如今发放福利喽!
npm直接安装使用,还有木有更方便的了,O(∩_∩)O哈哈~
这是一个基于vue的paginator组件,话很少说,直接开撸github地址: vue-paginator-simple

demo img

当页数小于999(包括999)页

页数大于999页

首页或尾页disabled

10页以内显示

正在研究怎么作出一个demo发布到网上,后续会发demo地址

npm安装

npm install vue-paginator-simple --save-dev

Props传参

pageCount //总页数

[initPage] //初始页,选填(场景举例: URL直接指向第三页)

Event监听事件

@togglePage //切换页面,本组件会返回当前点击的页数

Usage用法

<template lang="html">
    <paginator :pageCount="pageCount" :initPage="initPage" @togglePage="togglePage($event)"></paginator>
</template>

<script>
    import vuePaginator from 'vue-paginator-simple';

    export default {
        data(){
            return {
                pageCount: 25,  //总页数
                initPage: 1  //初始页[optional],可为null
            };
        },
        components:{
            'paginator': vuePaginator,
        },
        methods:{
            togglePage(indexPage){
                //打印出当前页数
                console.log(indexPage);
            },
        }
    }
</script>

<style lang="css">
    @import 'vue-paginator-simple/dist/vue-paginator-simple.css';
</style>

Code源码 vue-paginator-simple

分页组件 paginator.vue

<template lang="html">
    <div class="pagination">
        <ul>
            <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li>
            <li :class="{active: curPage == 1}" @click="page(1)">1</li>
            <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
            <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li>
            <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
            <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li>
            <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一页</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props:['pageCount'],
        data(){
            return {
                curPage: 1,
            };
        },
        computed:{
            middlePages(){
                if(this.pageCount <= 2){
                    return 0;
                }else if(this.pageCount> 2 && this.pageCount <= 10){
                    return this.pageCount-2;
                }else{
                    return this.curPage > 999 ? 5 : 8;
                }
            },
            bigLimit(){
                return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
            },
            offset(){
                if(this.curPage <= 5){
                    return 2;
                }else if(this.curPage >= this.bigLimit){
                    return this.bigLimit-2;
                }else{
                    return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
                }
            }
        },
        methods:{
            page(indexPage){
                this.$emit('togglePage',indexPage);
                this.curPage = indexPage;
            },
            prevPage(){
                if(this.curPage != 1){
                    this.page(this.curPage-1);
                }
            },
            nextPage(){
                if(this.curPage != this.pageCount){
                    this.page(this.curPage+1);
                }
            }
        }
    };
</script>

<style lang="css" scoped>
    @import 'styles/vars.css';
    .pagination{
        width: 660px;
        text-align: center;
        ul{
            margin: 40px 0 60px 0;
            li{
                cursor: pointer;
                display: inline-block;
                padding: 5px 9px;
                border: 1px solid #e1e1eb;
                margin-right: 5px;
                &.active{
                    background: #4078c0;
                    color: #fff;
                }
                &.ellipsis{
                    border: none;
                }
                &.disabled{
                    color: #dcdcdc;
                }
            }
        }
    }
</style>