vue2的一个分页小组件

在网站中经常会遇到展示的列表过多，页面会变得很长，这样很不美观。所以把内容分页展示是很普遍的做法。在这里我分享一个vue2写的分页小组件，代码不多，在需要用到的地方import一下，通过props给它传几值就能用了。

外观如图所示：

点击左移按钮，按钮选框左移动；点击右移按钮，按钮选框右移动；点击首页按钮，选框回到第一个按钮；点击尾页按钮，按钮选框选中最后一个页数按钮。在跳转页输入框输入页码数，点击回车键，直接跳转到相应页。

可以限定按钮在页面上的个数（默认最多16，超出部分隐藏）

隐藏按钮后点击尾页按钮的效果

跳转到相应页面的效果

提示：组件样式使用的是less

全部代码如下（部分注释）：

<template>
  <div class="choosePages">
    <a href="javascript:;" class="firstPage" @click="toFirst">首页</a><a
    href="javascript:;" class="last" @click="chooseBtnLast"><i></i></a><a
    href="javascript:;"v-for="item in showBtns" :class="{pageNum : chooseBtnIndex === item }" @click="clickBtn(item)">{{item}}</a><a
    href="javascript:;" class="next" @click="chooseBtnNext"><i></i></a><a
    href="javascript:;" class="lastPage" @click="toLast">尾页</a><span
    class="hint">跳转到</span><input type="text" v-model="pageIndex" @keyup="goIndex"><span>页</span><span>共{{btns.length}}页</span>
  </div>
</template>
<script>
    export default {
    props:{
      //展示内容的列表总个数
      listsNum:{
         type:Number,
         default:90,
      },
      //每页展示的内容列表个数
      itemsNum:{
        type:Number,
        default:5,
      },
      //选中的对应页处理函数
      getNextPage:{
        type:Function,
        default:function(index){
          console.log(index)
        }
      }
    },
    data(){
      return {
         btns : [],
         showBtns : [],
         chooseBtnIndex :1, //页码
         lengthBtns : 16,   //按钮最多在页面上的展示个数
         overNum:0,
         pageIndex:'1',

      }
    },
    created() {
       this.createBtns(this.listsNum);
    },
    computed: {

    },
    methods: {
      //跳转页面
       goIndex(e){
         if(e.keyCode !== 13 || +this.pageIndex > this.btns.length){
           return;
         }
         console.log(this.pageIndex)

         this.chooseBtnIndex = +this.pageIndex;
         this.getPageMessage ();
         if(+this.pageIndex > this.lengthBtns){ //选择的页面大于显示个数限制
           this.overNum = +this.pageIndex - this.lengthBtns;
           this.showBtns = null;
           this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }else{
           this.overNum=0;
           this.showBtns = null;
           this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }

       },
      //5个列表为一页
       createBtns(n){
         let length = 0;
         if(n>this.itemsNum){
           length = parseInt(n/this.itemsNum);
           if(parseInt(n%this.itemsNum)>0){
             length = length + 1;
           }
           for(let i=0;i<length;i++){
             this.btns.push(i+1);
           }
           if(this.btns.length>this.lengthBtns){ //按钮长度不能大于长度设定值
             this.showBtns = null;
             this.showBtns = this.btns.slice(0,this.lengthBtns);
           }else{
             this.showBtns = null;
             this.showBtns = this.btns;
           }

         }else {
           return;
         }
       },
        getPageMessage (){
           //请求选择的页面信息
           console.log( '请求的第页:'+this.chooseBtnIndex);
           this.getNextPage(this.chooseBtnIndex);
        },
       clickBtn(index){
         this.chooseBtnIndex = index;
         this.getPageMessage ();
       },
      chooseBtnLast(){  //前一个按钮
         if(this.chooseBtnIndex === 1){
           return
         }
         this.chooseBtnIndex--;
         this.getPageMessage ();
         if(this.overNum>0){ //按钮长度不能大于长度设定值
            this.overNum--;
           if(this.overNum < 0){
             return
           }
            this.showBtns = null;
            this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }
      },
      chooseBtnNext(){  //后一个按钮  向后移动
        if(this.chooseBtnIndex === this.btns.length){
          return
        }
        this.chooseBtnIndex++;
        this.getPageMessage ();
        if(this.chooseBtnIndex>this.lengthBtns){ //按钮长度不能大于长度设定值
          this.overNum++;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      },
      toFirst(){
        if(this.chooseBtnIndex === 1){
          return
        }
        this.chooseBtnIndex=1;
        this.getPageMessage ();
        if(this.overNum>0){ //按钮长度不能大于长度设定值
          this.overNum=0;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      },
      toLast(){
        if(this.chooseBtnIndex === this.btns.length){
          return
        }
        this.chooseBtnIndex=this.btns.length;
        this.getPageMessage ();
        if(this.btns.length>this.lengthBtns){ //按钮长度不能大于长度设定值
          this.overNum = this.btns.length - this.lengthBtns;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      }
    },
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .choosePages{
    text-align: center;
    margin: 34px 0;
    a{
      display: inline-block;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #999;
      margin-right: 10px;
      color:#333;
      background: #fff;
      font-size: 13px;
      i{
        display: inline-block;
        width: 10px;
        height: 12px;
      }
    }
    .last{
      i{
        background: url("../../../assets/img/icon_last@2x.png") no-repeat 0 0;
        background-size: 10px 12px;
      }
      &:hover{
        background: #f2f2f2;
      }
    }
    .next{
      i{
        background: url("../../../assets/img/icon_next@2x.png") no-repeat 0 0;
        background-size: 10px 12px;
      }
      &:hover{
        background: #f2f2f2;
      }
    }
    .pageNum{
      background: #000;
      border: 1px solid #000;
      color: #fff;
    }
    .firstPage,.lastPage{
       width: 45px;
       &:hover{
         background: #f2f2f2;
         border: 1px solid #666;
       }
    }
    .lastPage{
      margin-right: 0;
    }
    span{
      color:#333;
      font-size: 13px;
      margin-left: 5px;
      margin-right: 5px;
    }
    .hint{
      margin-left: 15px;
    }
    input{
      width: 26px;
      text-align: center;
    }
  }
</style>

 

转载于:https://my.oschina.net/u/3185514/blog/848724