基于vue实现分页/翻页组件paginator示例

序言

项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教

当页数小于999(包括999)页

页数大于999页

首页或尾页disabled

10页之内显示

usage

参数

pagecount: 整数,代表总页数

监听事件

@togglepage: 监听切换页面事件,可以获取到当前前往页的页数

父组件调用方法 index.vue

<template lang="html">
  <div>
    <paginator :pagecount="pagecount" @togglepage="togglepage($event)"></paginator>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //总页数
      pagecount: 24
    }
  },
  methods:{
    togglepage(indexpage){
      //打印出当前页数
      console.log(indexpage);
    },
  }
}
</script>

分页组件 paginator.vue

<template lang="html">
  <div class="pagination">
    <ul>
      <li :class="{disabled: curpage == 1}" @click="prevpage" v-if="pagecount > 1">上一页</li>
      <li :class="{active: curpage == 1}" @click="page(1)">1</li>
      <li class="ellipsis" v-show="curpage > 5 && pagecount > 10">...</li>
      <li :class="{active: curpage == index+offset}" v-for="(item,index) in middlepages" @click="page(index+offset)">{{index+offset}}</li>
      <li class="ellipsis" v-show="curpage < biglimit && pagecount > 10">...</li>
      <li :class="{active: curpage == pagecount}" @click="page(pagecount)" v-if="pagecount > 1">{{pagecount}}</li>
      <li :class="{disabled: curpage == pagecount}" @click="nextpage" v-if="pagecount > 1">下一页</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:['pagecount'],
    data(){
      return {
        curpage: 1,
      };
    },
    computed:{
      middlepages(){
        if(this.pagecount <= 2){
          return 0;
        }else if(this.pagecount> 2 && this.pagecount <= 10){
          return this.pagecount-2;
        }else{
          return this.curpage > 999 ? 5 : 8;
        }
      },
      biglimit(){
        return this.middlepages > 5 ? this.pagecount-6 : this.pagecount -3;
      },
      offset(){
        if(this.curpage <= 5){
          return 2;
        }else if(this.curpage >= this.biglimit){
          return this.biglimit-2;
        }else{
          return this.middlepages > 5 ? this.curpage-3 : this.curpage-2;
        }
      }
    },
    methods:{
      page(indexpage){
        this.$emit('togglepage',indexpage);
        this.curpage = indexpage;
      },
      prevpage(){
        if(this.curpage != 1){
          this.page(this.curpage-1);
        }
      },
      nextpage(){
        if(this.curpage != this.pagecount){
          this.page(this.curpage+1);
        }
      }
    }
  };
</script>

<style lang="css" scoped>
  @import 'styles/vars.css';
  .pagination{
    width: 660px;
    text-align: center;
    ul{
      margin: 40px 0 60px 0;
      li{
        cursor: pointer;
        display: inline-block;
        padding: 5px 9px;
        border: 1px solid #e1e1eb;
        margin-right: 5px;
        &.active{
          background: #4078c0;
          color: #fff;
        }
        &.ellipsis{
          border: none;
        }
        &.disabled{
          color: #dcdcdc;
        }
      }
    }
  }
</style>

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