vue分頁器組件編寫方法詳解

//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>