vue项目自定义分页组件（PC）

近期做的pc项目是类似京东商城的，使用vue框架来实现的，商城项目必然少不了商品列表这些，所以用到分页这个功能，上网找了好多分页插件觉得都不是很理想，所以决定自己封装一个组件来用。

先给大家上张效果图

父页面传过来的参数

首先给大家介绍一下父组件需要传过来的参数

props:{
          //父级页面传过来当前页面的路由
          path:{
              type:String,
              default:''
          }, 
           //总条数
            count:{
              type:Number,
              default:0
            },
            //每页显示多少条数据 默认是10
            number:{
              type:Number,
              default:10
            } 
        },

组件参数

这些参数是需要实时计算的

computed:{
            //总页数  总条数➗每个显示的条数
            totalPage(){ 
                return Math.ceil(this.count / this.number)
            },
            //当前显示的是哪几个页面  他返回的是一个数组
            pages(){
                return this.getPageData(this.now)
            },
           //当前的页数
            now () {
                return this.$route.query.p || 1
            }
        },

废话不多说来 代码在此

在components里新建一个vue页面 因为我的所有组件都在components里面 大家可以根据自己的目录来建

templete

<template>
    <div class="public-pagination" v-if="count">
        <router-link :to="{path:path,query:{p:1}}" class="page" :class="{'disabled':now==1}">首页</router-link>
        <ul class="page-list">
            <li class="page-item" v-for="page in pages">
                <template v-if="page.type == 'more'">
                    <a class="notPointer">{{page.num}}</a>
                </template>
                <router-link v-else :to="{path:path,query:{p:page.num}}"
                   class="notPointer"
                             :class="{'active-link':page.num==now}"
                >{{page.num}}</router-link>
            </li>
        </ul>
        <router-link :to="{path:path,query:{p:totalPage}}" class="page" :class="{'disabled':now == totalPage}">尾页</router-link>
    </div>
</template>

script

<script>
    export default {
        props:{
          path:{
              type:String,
              default:''
          },
            count:{
              type:Number,
              default:0
            },
            number:{
              type:Number,
              default:10
            }
        },
        computed:{
            totalPage(){
                return Math.ceil(this.count / this.number)
            },
            pages(){
                return this.getPageData(this.now)
            },
            now () {
                return this.$route.query.p || 1
            }
        },
        methods:{
            getPageData(now){
                now  = parseInt(now,10)
                let start = 0;
                let end = 0;
                let count = this.totalPage
                let number = 7
                let num = parseInt(number / 2)
                if(now <= num + 1) {
                    start = 1
                    end = Math.min(number,count)
                }else if(now < count - num) {
                    start = now - num
                    end = now + num
                }else{
                    start = Math.max(1, count - number + 1)
                    end = count
                }
                let startMore = false
                if(start > 1) {
                    start + 1
                    startMore = true
                }
                let endMore = false
                if(end < count) {
                    start + 1
                    endMore = true
                }
                let arr = []
                if(startMore){
                    arr.unshift({
                        type: 'more',
                        num: '...'
                    })
                }
                for(start; start<=end; start++){
                    arr.push({
                        type: 'link',
                        num: start
                    })
                }
                if(endMore){
                    arr.push({
                        type: 'more',
                        num: '...'
                    })
                }
                return arr
            }
        }
    }
</script>

css

<style lang="less" rel="stylesheet/less">
    //分页
    .public-pagination{
        height: 24px;
        margin: 30px auto;
        text-align: center;
        .page{
            display: inline-block;
            width: 48px;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
            background: #FCFCFC;
            border: 1px solid #E0E0E0;
            &.disabled{
                &:hover{
                    color: #c0c4cc;
                    cursor: not-allowed;
                }
            }
        }
        .page-list{
            display: inline-block;
            margin: 0 10px;
            font-size: 0;
            line-height: 0;
            .page-item{
                display: inline-block;
                margin-right: 10px;
                &:last-child {
                    margin-right: 0;
                }
                .notPointer{
                    display: block;
                    font-size: 12px;
                    line-height: 22px;
                    color: #000;
                    text-align: center;
                    border: 1px solid #E0E0E0;
                    border-radius: 1px;
                    padding: 0 5px;
                    min-width: 12px;
                    &.active-link{
                        color: #fff;
                        background: #bf1a2c;
                        border-color:#bf1a2c ;
                    }
                }
            }
        }
    }
</style>

好了，以上就是组件的全部代码

父组件该如何调用？

分页组件的调用

1.在父页面引入

import paginationApp from '@/components/paginationApp'

components:{
   paginationApp
 },

2.深度监听路由的变化以便更好的数据渲染

watch:{
            $route: {
                handler: function(){
                    this.reset()
                },
                // 深度观察监听
                deep: true
            }
        },

3.获取整个路径

computed:{
            path(){
                return this.$route.fullPath
            }
        },

4.使用组件

//path是当前页面的路由 count是数据的所有条数  number不传默认是10
<pagination-app :path="path" :count="count"></pagination-app>

好了这就是所有的代码了
你们的支持就是我继续分享总结的动力，希望能帮助到大家
有什么问题可以随时交流

附上github地址：https://github.com/roseTong