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

更新時(shí)間：2022年03月03日 08:32:10 作者：web_xiaolei

這篇文章主要為大家詳細(xì)介紹了vue分頁器組件編寫方法，可設(shè)置初始當(dāng)前頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用vue編寫的分頁器組件，支持輸入頁碼跳轉(zhuǎn)，效果如圖：

1、點(diǎn)擊前五頁：

2、點(diǎn)擊中間部分頁面

3、點(diǎn)擊第一頁，上一頁按鈕失效，點(diǎn)擊最后一頁，下一頁按鈕失效

組件調(diào)用：

//html調(diào)用 參數(shù):pageSize(總頁數(shù));pageNo(當(dāng)前頁)
<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>

//組件引入
import pager from '../../component/pager/pager.vue'

//組件調(diào)用聲明
components:{ pager}

//參數(shù)
data(){
 return {
  pageSize: 30,
  pageNo: 2
 }
}

//接收跳轉(zhuǎn)事件
methods:{
 jump(id){
  console.log(id)
 },
}

組件編寫

pager.vue：

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

完整代碼可下載：vue分頁器組件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: