vue分页器组件编写方法详解

使用vue编写的分页器组件，支持输入页码跳转，效果如图：

1、点击前五页：

2、点击中间部分页面

3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效

组件调用：

//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)
 },
}

组件编写

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传过来的参数
  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>

完整代码可下载：vue分页器组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。