1.起因

　　今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.

2.实现难点

　　分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和

右边省略(folder2),布局代码如下:

 

<div class="pagination" @click="pageClick">
        <button class="pre">上一页</button>
        <ul class="pages">
            <li :class="[\'first\', { \'active\' : current == 1 }]" v-if="total">
                1
            </li>
            <li :class="[ testLeft,goback]"
                v-show="showPreMore"
                @mouseenter="testLeft=\'more-left\'"
                @mouseleave="testLeft=\'more\'"></li>

            <li :class="[\'page-item\', { \'active\' : current == item }]" v-for="item in $pages">
                {{ item }}
            </li>

            <li :class="[ testRight,gogo]" 
                v-show="showNextMore"
                @mouseenter="testRight=\'more-right\'"
                @mouseleave="testRight=\'more\'"></li>

            <li :class="[\'last\', { \'active\' : current == $last }]" v-if="total">
                {{ $last }}
            </li>
        </ul>
        <button class="next">下一页</button>

    </div>

 

 

 

 $pages是一个计算属性,用于动态生成中间的页码,以及控制folder1和folder2的显示,代码如下:

computed:{
        // 中间页数组
        $pages(){
            const foldPage = this.foldPage 
            const current = Number(this.current)
            const halfFoldPage = Math.floor((foldPage-2)/2) 

            if (this.$last > foldPage){
                if (current - halfFoldPage > 2){
                    this.showPreMore = true
                }else {
                    this.showPreMore = false
                }

                if (current + halfFoldPage < this.$last){
                    this.showNextMore = true
                }else {
                    this.showNextMore = false
                }
            }

            let array = []

            // folder1显示
            if (this.showNextMore && !this.showPreMore){
                for(let i = 2; i < foldPage; i++){
                    array.push(i)
                }
            // folder1 和 folder2都显示
            }else if ( this.showPreMore && this.showNextMore ){
                for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){
                    array.push(i)
                }
            // folder2显示
            }else if (!this.showNextMore && this.showPreMore){
                // 当folder2显示的时候,页码不能大于$last,需要往前多显示差额
                let dis = current + halfFoldPage - this.$last + 1;

                for(let i = current - halfFoldPage - dis ; i < this.$last; i++){
                    array.push(i)
                }
            // 都不显示
            }else {
                for(let i = 2; i < this.$last; i++){
                    array.push(i)
                }
            }
            return array
        },
        // 总页数
        $last(){                         
            return Math.ceil(this.total/this.size)
        }
    }

 

所有的点击都用一个函数处理, 根据e.target判断点击的目标.从而做出相应的逻辑:

methods:{
        pageClick(e){
            let newPage = Number(e.target.textContent)
            this.current = Number(this.current);

            if (!isNaN(newPage) && newPage){
                this.current = newPage
            }else {
                // 下一页
                if (e.target.className.indexOf(\'next\') != -1){
                    if (this.current == this.$last){
                        return;
                    }
                    this.current ++
                }
                // 上一页
                else if (e.target.className.indexOf(\'pre\') != -1){
                    if (this.current == 1){
                        return
                    }
                    this.current --
                }
                // 省略向左
                else if (e.target.className.indexOf(\'left\') != -1){
                    this.current -= this.foldPage - 2

                    if (this.current <= 1){
                        this.current = 1
                        return
                    }
                }
                // 省略向右
                else if(e.target.className.indexOf(\'right\') != -1){
                    this.current += this.foldPage - 2
                    
                    if (this.current >= this.$last){
                        this.current = this.$last
                        return 
                    }
                }

            }
        }
    },

 

3.总结

　　pagination组件在element中算是一个很简单的组件,静下心来看不是很复杂,理解其思路以后可以自己尝试去写出来,细节可以无需在意.

　　

版权声明：本文为024-faith原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/024-faith/p/pagination.html