分頁元件接收引數有（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>