vue分页器的封装

54 阅读 0 评论 36 点赞

我是靠谱客的博主简单钢笔，最近开发中收集的这篇文章主要介绍vue分页器的封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.需要注册为全局组件

//main.js
// 封装分页器为全局组件
Vue.component(Pagination.name,Pagination);

2.父组件的使用分页器，需要传递相应的参数和自定义事件

 <Pagination :pageNo="searchParam.pageNo" :pageSize="searchParam.pageSize" :total="searchList.total" :continues="5" @getPageNo="getPageNo"/>

3.分页器组件内的实现代码

①需要接收来自父组件的数据，pageNo是当前页面，pageSize是每个页面展示的数量，total是一共多少条数据，continues是会连续展示的数字

 props:['pageNo','pageSize','total','continues'],

②我们需要确定总的页数totalPage,在计算属性里面设置

// 一共多少页,总数据除以每页的数据向上取整
        totalPage()
        {
            return Math.ceil(this.total/this.pageSize);
        },

③我们需要确定连续页码的起始数字和结尾数字，我们首先考虑当

 startNumAndEndNum()
        {
            // 解构赋值
            const { continues, pageNo, totalPage} = this;
            // 进行计算
            let start = 0,end = 0
            if(continues>totalPage)
            {
                start = 1;
                end = totalPage;
            }
            else
            {
                start = pageNo - parseInt(continues/2);
                end = pageNo + parseInt(continues/2);
            }
            //当start小于1的时候，就直接是1了，然后结尾的数字就是continues
            if(start<1)
            {
                start = 1;
                end = continues;
            }
//          和start一样的
            if(end > totalPage)
            {
                end = totalPage;
                start = totalPage-continues+1;
            }
//返回对象
            return {start,end};
        },

③定义点击事件，当点击的时候，就会触发自定义事件将当时的点击的页数发给父组件，就会去改变pageNo,然后在发给子组件

 methods:{
      sendPageNo(pageNum)
      {
        this.$emit('getPageNo',pageNum);
      }
    }

④动态的展示分页器，分为三个部分，开头，连续的页面，结尾，当start等于1的时候会有两个1，

于是需要加入v-if来显示开头是否要显示，还有开头放入点点，当start为2的时候，1和2中间是没有其他的页码，所以不用展示‘点’，结尾也是一样的，v-for是可以遍历数字，字符串，对象的，还有上一页和下一页当到头了，点击是没有效果的，需要加入动态disable，最后是动态加入类名，当前页面的数字是别的样式

<div>
        <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul>
                <li class="prev disabled">
                  <a href="#" @click="sendPageNo(pageNumber-1)" :disable="pageNumber=1">«上一页</a>
                </li>
                <!-- 1是否展示出来 -->
                <li :class="{active:pageNo==1}">
                  <a href="#" v-if="startNumAndEndNum.start > 1" @click="sendPageNo(1)">1</a>
                </li>
                 <li class="dotted" v-if="startNumAndEndNum.start > 2" ><span>...</span></li>
                 <!-- 使用v-for进行遍历 将小于起始位置的数字不显示-->
                 <li v-for="num in startNumAndEndNum.end" v-if ="num >= startNumAndEndNum.start" :class="{active:pageNo==num}">
                  <a href="#" @click="sendPageNo(num)">{{num}}</a>
                </li>
                <li class="dotted" v-if="startNumAndEndNum.end < totalPage-1"><span>...</span></li>
                 <li>
                  <a href="#" v-if="startNumAndEndNum.end < totalPage" @click="sendPageNo(totalPage)" :class="pageNo==totalPage">{{totalPage}}</a>
                </li>
                <li class="next">
                  <a href="#" @click="sendPageNo(pageNumber+1)" :disable="pageNumber=totalPage">下一页»</a>
                </li>
              </ul>
              <div><span>共{{total}}条记录&nbsp;</span></div>
            </div>
          </div>
    </div>