vue分页二次封装，它来了，可以直接拿去使用！

废话少说，先上效果！！！

 1、首先创建一个scroll-to.js页面，以.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
let 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
  let animateScroll = function() {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    let 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()
}

 2、创建一个Pagination.vue文件，以.vue为后缀,然后在当前页面中导入第一步创建的scroll-to.js。

<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination v-model:current-page="currentPage" :background="background" :layout="layout" :total="total" v-model:page-size="pageSize" v-bind="$attrs" :page-sizes="pageSizes" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </div>
</template>

<script>
import { scrollTo } from "@/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 [15, 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,
    },
  },
  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) {
      this.$emit("update:limit", val)
      this.$emit("pagination", { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange (val) {
      this.$emit("update:page", val)
      this.$emit("pagination", { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
  },
};
</script>

<style scoped>
.pagination-container.hidden {
  display: none;
}
</style>

3、在main.js中全局导入，方便我们在每个页面中使用。

import '@/assets/styles/box.scss' // css

import Pagination from './components/Pagination'

const app = createApp(App)
app.component('Pagination', Pagination)
app.mount('#app')

注意：这个是分页的样式可以直接使用（将这个样式引入到全局样式里面在main.js中直接 import '@/assets/styles/box.scss'就可以）。

/** 表格布局 **/
.pagination-container {
  position: relative;
  height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;
  padding: 10px 20px !important;
  width: 100%;
  box-sizing: border-box;
}

.pagination-container .el-pagination {
  right: 0;
  top: 0;
  position: absolute;
}

@media (max-width: 768px) {
  .pagination-container .el-pagination > .el-pagination__jump {
    display: none !important;
  }
  .pagination-container .el-pagination > .el-pagination__sizes {
    display: none !important;
  }
}

4、在页面中如何使用。

    <pagination v-show="state.page.total > 0" v-model:page="state.page.page" v-model:limit="state.page.limit"
      :total="state.page.total" @pagination="getList" />
//注意@pagination="getList"为封装的方法我们只需要将相应的page和limit传入就可以正常使用了。
    function getList() {
      query();
    }