Vue-封装一个通用的分页组件，并实现全局注册组件使用

前言
分页无论是在网站和app中用到都很多，开发中经常要使用到，前端有时侯频繁用到分页的功能，每次用到要再次去实现，那么我们为了减少开发的复杂性，提高效率，是可以将它作为一个公共组件封装起来供各个页面来使用！，并注册一个全局组件。
实现思路
1、用到的参数
pageNum: 1 默认第几页
pageSize: 10 一页展示几条
total: 0 总条数
2、用到的传递的参数和方法

:pluspagerMethod=getArticleList
:pageSize=10 每页显示个数,目前固定为10，后期优化可以去实现参数数组选择
:total=0 查询返回的数据总数量
:pageNum=1 具体分页查询的页号
3、数据传递的方法
props 父传子
在父组件中把分页方法传递给子组件
4、实现过程
首先定义一个子组件页面用来封装分页:
在父组件中(使用的页面)引入封装组件(子组件)并注册，然后在页面中使用，在父组件中给标签(注册的组件名)上绑定一个属性， 属性上挂载需要传递的值，通过 props 在子组件(封装文件)接收数据；
在子组件中使用伏组件传递的方法，调用这个分页查询的方法，组件用的是bootstrap自带的分页样式，也可以自己编写实现样式！
代码详解:
封装文件 /src/components/pager/PlusPager.vue

<template>
  <nav aria-label="Page navigation" v-if="total != 0">
    <ul class="pagination">
      <li v-if="pageNum != 1" :class="pageNum == 1 ? 'disabled' : ''">
        <a
          href="javascript:void(0);"
          @click="getList(pageNum - 1)"
          aria-label="Previous"
        >
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <!-- Math.ceil(total / pageSize) -->
      <li
        :class="pageNum == pageNumber ? 'active' : ''"
        v-for="(pageNumber, index) in Math.ceil(total / pageSize)"
        :key="index"
      >
        <a
          v-if="pageNum <= 4 && pageNumber <= 9"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum - 4"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum - 3"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum - 2"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum - 1"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum + 1"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum + 2"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum + 3"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="pageNum > 4 && pageNum <= Math.ceil(total / pageSize)-4 && pageNumber == pageNum + 4"
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
        <a
          v-if="Math.ceil(total / pageSize) > 9 && pageNum > Math.ceil(total / pageSize)-4 && pageNumber > Math.ceil(total / pageSize)-9 "
          href="javascript:void(0);"
          @click="getList(pageNumber)"
          >{{ pageNumber }}
        </a>
      </li>
      <!-- <li >
            <a v-for="index in Math.ceil(total / pageSize)" :key="index" 
             href="javascript:void(0);" @click="getList(index)">{{index}}
            </a>
          </li> -->
      <!-- <li><a href="javascript:void(0);">2</a></li>
          <li><a href="javascript:void(0);">3</a></li>
          <li><a href="javascript:void(0);">4</a></li>
          <li><a href="javascript:void(0);">5</a></li> -->
      <li
        v-if="pageNum != Math.ceil(total / pageSize)"
        :class="pageNum == Math.ceil(total / pageSize) ? 'disabled' : ''"
      >
        <a
          href="javascript:void(0);"
          @click="getList(pageNum + 1)"
          aria-label="Next"
        >
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "PlusPager",
  props: {
    pluspagerMethod: {
      type: Function,
      default: null,
    },
    total: {
      required: true,
      type: Number,
    },
    pageNum: {
      type: Number,
      default: 1,
    },
    // limit: {
    //   type: Number,
    //   default: 20,
    // },
    pageSize: {
      type: Number,
      default:10,
    //   default() {
    //     return [10, 20, 30, 50];
    //   },
    },
    // layout: {
    //   type: String,
    //   default: "total, sizes, prev, pager, next, jumper",
    // },
    // background: {
    //   type: Boolean,
    //   default: true,
    // },
    // autoScroll: {
    //   type: Boolean,
    //   default: true,
    // },
    // hidden: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {};
  },
  methods: {
    getList(pageNum) {
        if(this.pluspagerMethod) {
            this.pluspagerMethod(pageNum);
        }
    },
  },
};
</script>

<style>
</style>

父组件使用子组件，注册子组件的方法：

第一种：在main.js中直接注册

// 引入
import PageTools from '@/components/PageTools'
// 注册为全局组件
Vue.component('PageTools', PageTools)

缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。
第二种：使用插件的形式注册
在统一注册的入口文件中

// 引入
import PageTools from './PageTools'
export default {
  install(Vue) {
  // 注册全局组件
    Vue.component('PageTools', PageTools)
  }
}

入口文件注册插件（main.js）

import Components from './components'
Vue.use(Components)

使用文件 /src/views/page/ArticleListPage.vue

<div v-for="(item, index) in articleList" :key="index">
</div>

<plus-pager :total="articleTotal" :pageNum="queryParams.pageNum" :pageSize="queryParams.pageSize" :pluspagerMethod="getArticleList">
</plus-pager>

data(){
    return {
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        pathName: "",
    },
    articleTotal: 0,
    articleList: [],
    }
}

getArticleList(pageNum) {
      this.queryParams.pageNum=pageNum
      getGpArticlesByCategory(this.queryParams)
        .then((response) => {
          //console.log(response);
          this.articleList = response.rows;
          this.articleTotal = response.total;
        })
        .catch((error) => {});
},

实现效果

至此，有关于分页器的封装就结束啦。