基於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>