vue分页组件

分页组件接收参数有（pageNum）总页数，返回父组件参数有（jumpData）页码数
 
实现思路是，先获取数据的总页数，把总页数放入分页组件里面初始化按钮，
每点击页数按钮或者上一页，下一页都会触发返回页码数的数据给父组件，
父组件才是请求数据，然后渲染列表，实现了分页效果


​​​​<!--suppress ALL -->
<template>
  <!--翻页 start-->
  <div class="zj_page zj_alignC">
    <div class="page"  v-show="show">
      <div class="pagelist">
        <span class="jump" v-show="pstart" @click="lastPage">上一页</span>
        <span v-show="currentPage>5" class="jump" @click="jumpPage(1)">1</span>
        <span class="ellipsis"  v-show="efont">...</span>
        <span class="jump" v-for="num in indexs" :class="{bgprimary:currentPage===num}" @click="jumpPage(num)">{{num}}</span>
        <span class="ellipsis"  v-show="ebehind">...</span>
        <span v-show="currentPage<pageNum-4" class="jump" @click="jumpPage(pageNum)">{{pageNum}}</span>
        <span  v-show="pend" class="jump" @click="nextPage">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'Page',
        props:['pageNum'],//父组件传过来的总页数值
        data: function () {
            return {
                currentPage: 1, // 当前页
                changePage: '', // 跳转页
                nowIndex: 0
            }
        },
        computed: {
            //初始化组件
            show: function () {
                return this.pageNum && this.pageNum !== 1
            },
            pstart: function () {
                return this.currentPage !== 1
            },
            pend: function () {
                return this.currentPage !== this.pageNum
            },
            efont: function () {
                if (this.pageNum <= 7) return false
                return this.currentPage > 5
            },
            ebehind: function () {
                if (this.pageNum <= 7) return false
                var nowAy = this.indexs
                return nowAy[nowAy.length - 1] !== this.pageNum
            },
            indexs: function () {
                var left = 1,
                    right = this.pageNum,
                    ar = []
                if (this.pageNum >= 7) {
                    if (this.currentPage > 5 && this.currentPage < this.pageNum - 4) {
                        left = Number(this.currentPage) - 3
                        right = Number(this.currentPage) + 3
                    } else {
                        if (this.currentPage <= 5) {
                            left = 1
                            right = 7
                        } else {
                            right = this.pageNum

                            left = this.pageNum - 6
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                return ar
            }
        },
        methods: {
            jumpPage: function (id) {
                this.currentPage = id
                /*把跳转的参数传回给父组件，然后重新渲染数据列表*/
                this.$emit('jumpDate', { jumpData: id })
            },
            /*上一页事件*/
            lastPage:function () {
                this.currentPage--
                this.$emit('jumpDate', { jumpData: this.currentPage})
            },
            /*下一页事件*/
            nextPage:function () {
                this.currentPage++
                this.$emit('jumpDate', { jumpData: this.currentPage})
            }
        }

    }
</script>

<style scoped>
  .page {
    clear:both;
  }
  .pagelist {
    font-size: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
  }

  .pagelist span {
    font-size: 14px;
  }

  .pagelist .jump {
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 12px;
    line-height:33px;
    background:#e9e9e9;
    color:#333
  }

  .pagelist .bgprimary {
    cursor: default;
    color: #fff;
    background:#cc3333;
  }

  .ellipsis {
    padding: 0px 2px;
    margin-left: 12px;
  }

  .bgprimary {
    cursor: default;
    color: #fff;
    background:#cc3333;
  }
  .pagelist .jump.disabled{
    pointer-events: none;
    background: #ddd;
  }

</style>