vue分页组件，可直接使用

分页组件采用的element组件里的封装一下即可全局使用，方便快捷

 采用的是element组件的扥也组件，需安装element依赖，具体如何安装就不多说了，直接上干货

一、在utils新建scroll-to.js

scroll-to.js内容：

Math.easeInOutQuad = function(t, b, c, d) {

    t /= d / 2

    if (t < 1) {

      return c / 2 * t * t + b

    }

    t--

    return -c / 2 * (t * (t - 2) - 1) + b

  }

  // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts

  var requestAnimFrame = (function() {

    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }

  })()

  /**

   * Because it's so fucking difficult to detect the scrolling element, just move them all

   * @param {number} amount

   */

  function move(amount) {

    document.documentElement.scrollTop = amount

    document.body.parentNode.scrollTop = amount

    document.body.scrollTop = amount

  }

  function position() {

    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop

  }

  /**

   * @param {number} to

   * @param {number} duration

   * @param {Function} callback

   */

  export function scrollTo(to, duration, callback) {

    const start = position()

    const change = to - start

    const increment = 20

    let currentTime = 0

    duration = (typeof (duration) === 'undefined') ? 500 : duration

    var animateScroll = function() {

      // increment the time

      currentTime += increment

      // find the value with the quadratic in-out easing function

      var val = Math.easeInOutQuad(currentTime, start, change, duration)

      // move the document.body

      move(val)

      // do the animation unless its over

      if (currentTime < duration) {

        requestAnimFrame(animateScroll)

      } else {

        if (callback && typeof (callback) === 'function') {

          // the animation is done so lets callback

          callback()

        }

      }

    }

    animateScroll()

  }

二、在components新建Pagination    新建index.vue文件

index.vue内容：

<template>

  <div : class="pagination-container">

    <el-pagination

      :background="background"

      :current-page.sync="currentPage"

      :page-size.sync="pageSize"

      :layout="layout"

      :page-sizes="pageSizes"

      :pager-count="pagerCount"

      :total="total"

      v-bind="$attrs"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

    />

  </div>

</template>

<script>

import { scrollTo } from '../../utils/scroll-to'

export default {

  name: 'Pagination',

  props: {

    total: {

      required: true,

      type: Number

    },

    page: {

      type: Number,

      default: 1

    },

    limit: {

      type: Number,

      default: 20

    },

    pageSizes: {

      type: Array,

      default() {

        return [5,10, 20, 30, 50]

      }

    },

    // 移动端页码按钮的数量端默认值5

    pagerCount: {

      type: Number,

      default: document.body.clientWidth < 992 ? 5 : 7

    },

    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 {

    };

  },

  computed: {

    currentPage: {

      get() {

        return this.page

      },

      set(val) {

        this.$emit('update:page', val)

      }

    },

    pageSize: {

      get() {

        return this.limit

      },

      set(val) {

        this.$emit('update:limit', val)

      }

    }

  },

  methods: {

    handleSizeChange(val) {

      if (this.currentPage * val > this.total) {

        this.currentPage = 1

      }

      this.$emit('pagination', { page: this.currentPage, limit: val })

      if (this.autoScroll) {

        scrollTo(0, 800)

      }

    },

    handleCurrentChange(val) {

      this.$emit('pagination', { page: val, limit: this.pageSize })

      if (this.autoScroll) {

        scrollTo(0, 800)

      }

    }

  }

}

</script>

<style scoped>

.pagination-container {

  /* background: #fff; */

  /* padding: 32px 16px; */

  height: 50px;

  margin-top:30px;

  /* position: fixed; */

  right: 90px;

  bottom: 20px;

}

.pagination-container.hidden {

  /* display: none; */

}

</style>

 三、在main.js引入分组组件 ，并且挂在全局

import Pagination from "./components/Pagination";

Vue.component('Pagination', Pagination)

四、需要用到的页面，使用关在全局的方法名即可使用

 <pagination

            v-show="total > 0"

            :total="total"

            :page.sync="queryParams.pageNum"

            :limit.sync="queryParams.pageSize"

            @pagination="getSocialNumberList"

          />

复制粘贴 即可正常使用样式问题调一下即可，  @pagination为获取列表的方法，在改变条数或者页数的时候触达