//html調用 參數:pageSize(總頁數);pageNo(當前頁)<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>//組件引入import pager from '../../component/pager/pager.vue'//組件調用聲明components:{ pager}//參數data(){ return {  pageSize: 30,  pageNo: 2 }}//接收跳轉事件methods:{ jump(id){  console.log(id) },}

<template> <div class="pager-wrapper" ref="pager">  <div class="pager-box">   <a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:;" @click="jumpPrev()">上一頁</a>   <template v-for="i in pageSize">    <span v-if="i==pageNo" class="pager-curr">     <em class="pager-em"></em><em>{{i}}</em>    </span>    <a v-else-if="pageNo<5&&(i)<6" href="javascript:;" @click="jump(i)">     {{i}}    </a>    <a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:;" @click="jump(i)">     {{i}}    </a>    <template v-else>     <span v-if="pageNo<5&&i==6" class="pager-spr">…</span>     <span v-if="pageNo==4&&i==7" class="pager-spr">…</span>     <span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>     <span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>    </template>   </template>   <a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:;" @click="jumpNext()">下一頁</a>  </div>  <div class="pager-input">   <input type="text" v-model="jumpPage">   <a class="pager-btn-go" href="javascript:;" @click="Go()">GO</a>  </div> </div></template>

<script>export default { model:{ //通過v-model傳過來的參數  prop: 'pageNo',  event: 'jumpPage' }, props:{  pageSize:{   type: Number,   default: 1  },  pageNo:{ //通過v-model傳過來的參數   type: Number,   default: 1  } }, data(){  return {   jumpPage:'' //避免操作props參數  } }, computed: {  prevDisable: function(){ //“上一頁”按鈕是否可點   if(this.pageNo > 1){    return false;   }else{    return true   }  },  nextDisable: function(){ //“下一頁”按鈕是否可點   if(this.pageNo < this.pageSize && this.pageSize > 1){    return false;   }else{    return true;   }  }, }, methods: {  jumpPrev: function(){ //點擊上一頁   if(this.pageNo == 1){    return ;   }else{    this.$emit('jumpPage',this.pageNo-1);    this.$emit('on-jump',this.pageNo-1);   }  },  jumpNext: function(){ //點擊下一頁   if(this.pageNo == this.pageSize){    return ;   }else{    this.$emit('jumpPage',this.pageNo+1); //修改當前頁碼    this.$emit('on-jump',this.pageNo+1); //跳轉   }  },  jump: function(id){ //直接跳轉   if(id>this.pageSize){     id=this.pageSize;   }   this.jumpPage = '';   this.$emit('jumpPage',id); //修改當前頁碼   this.$emit('on-jump',id); //跳轉  },  Go: function(){   if(this.jumpPage==''){ //判空處理    return ;   }else if(/^/d*$/.test(parseInt(this.jumpPage))){ //填寫數字才能跳轉    this.jump(parseInt(this.jumpPage));    this.jumpPage = '';   }else{    this.jumpPage = '';    return ;   }  } }}</script>