<template>
 <ul class="mo-paging">
 <!-- prev -->
 <li :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]" @click="prev">prev</li>
 
 <!-- first -->
 <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">first</li>
 
 <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">...</li>
 
 <li :class="['paging-item', {'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
 
 <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">...</li>
 
 <!-- last -->
 <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">last</li>
 
 <!-- next -->
 <li :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]" @click="next">next</li>
 </ul>
</template>

.mo-paging {
 display: inline-block;
 padding: 0;
 margin: 1rem 0;
 font-size: 0;
 list-style: none;
 user-select: none;
 > .paging-item {
 display: inline;
 font-size: 14px;
 position: relative;
 padding: 6px 12px;
 line-height: 1.42857143;
 text-decoration: none;
 border: 1px solid #ccc;
 background-color: #fff;
 margin-left: -1px;
 cursor: pointer;
 color: #0275d8;
 &:first-child {
 margin-left: 0;
 }
 &:hover {
 background-color: #f0f0f0;
 color: #0275d8;
 }
 &.paging-item--disabled,
 &.paging-item--more{
 background-color: #fff;
 color: #505050;
 }
 //禁用
 &.paging-item--disabled {
 cursor: not-allowed;
 opacity: .75;
 }
 &.paging-item--more,
 &.paging-item--current {
 cursor: default;
 }
 //選中
 &.paging-item--current {
 background-color: #0275d8;
 color:#fff;
 position: relative;
 z-index: 1;
 border-color: #0275d8;
 }
 }
}

export default {
 name : 'MoPaging',
 //通過props來接受從父組件傳遞過來的值
 props : {
 
 //頁面中的可見頁碼，其他的以...替代, 必須是奇數(shù)
 perPages : { 
 type : Number,
 default : 5 
 },
 
 //當前頁碼
 pageIndex : {
 type : Number,
 default : 1
 },
 
 //每頁顯示條數(shù)
 pageSize : {
 type : Number,
 default : 10
 },
 
 //總記錄數(shù)
 total : {
 type : Number,
 default : 1
 },
 
 },
 methods : {
 prev(){
 if (this.index > 1) {
 this.go(this.index - 1)
 }
 },
 next(){
 if (this.index < this.pages) {
 this.go(this.index + 1)
 }
 },
 first(){
 if (this.index !== 1) {
 this.go(1)
 }
 },
 last(){
 if (this.index != this.pages) {
 this.go(this.pages)
 }
 },
 go (page) {
 if (this.index !== page) {
 this.index = page
 //父組件通過change方法來接受當前的頁碼
 this.$emit('change', this.index)
 }
 }
 },
 computed : {
 
 //計算總頁碼
 pages(){
 return Math.ceil(this.size / this.limit)
 },
 
 //計算頁碼，當count等變化時自動計算
 pagers () {
 const array = []
 const perPages = this.perPages
 const pageCount = this.pages
 let current = this.index
 const _offset = (perPages - 1) / 2
 
 
 const offset = {
 start : current - _offset,
 end : current + _offset
 }
 
 //-1, 3
 if (offset.start < 1) {
 offset.end = offset.end + (1 - offset.start)
 offset.start = 1
 }
 if (offset.end > pageCount) {
 offset.start = offset.start - (offset.end - pageCount)
 offset.end = pageCount
 }
 if (offset.start < 1) offset.start = 1
 
 this.showPrevMore = (offset.start > 1)
 this.showNextMore = (offset.end < pageCount)
 
 for (let i = offset.start; i <= offset.end; i++) {
 array.push(i)
 }
 
 return array
 }
 },
 data () {
 return {
 index : this.pageIndex, //當前頁碼
 limit : this.pageSize, //每頁顯示條數(shù)
 size : this.total || 1, //總記錄數(shù)
 showPrevMore : false,
 showNextMore : false
 }
 },
 watch : {
 pageIndex(val) {
 this.index = val || 1
 },
 pageSize(val) {
 this.limit = val || 10
 },
 total(val) {
 this.size = val || 1
 }
 }
}

<template>
 <div class="list">
 <template v-if="count">
 <ul>
 <li v-for="item in items">...</li>
 </ul>
 <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
 </mo-paging>
 </template>
 </div>
</template>
<script>
 import MoPaging from './paging'
 export default {
 //顯示的聲明組件
 components : {
 MoPaging 
 },
 data () {
 return {
 pageSize : 20 , //每頁顯示20條數(shù)據(jù)
 currentPage : 1, //當前頁碼
 count : 0, //總記錄數(shù)
 items : []
 }
 },
 methods : {
 //獲取數(shù)據(jù)
 getList () {
 //模擬
 let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
 this.$http.get(url)
 .then(({body}) => {
 
 //子組件監(jiān)聽到count變化會自動更新DOM
 this.count = body.count
 this.items = body.list
 })
 },
 
 //從page組件傳遞過來的當前page
 pageChange (page) {
 this.currentPage = page
 this.getList()
 }
 },
 mounted() {
 //請求第一頁數(shù)據(jù)
 this.getList()
 } 
 }
</script>