ElementUI分页组件的封装

1.准备封装

创建index.vue

路径：src-->components-->Pagination-->index.vue

<template><div :class="{'hidden':hidden}" class="pagination-container"><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes="pageSizes":total.sync="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,default: 0},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,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}},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('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 {text-align: right;background: #fff;padding: 32px 16px; } .pagination-container.hidden {display: none; } </style>

2.main.js全局挂载组件

import Pagination from "@/components/Pagination"Vue.component('Pagination', Pagination)

3.在页面内使用组件

<paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/>

4.scroll-to.js文件

Math.easeInOutQuad = function(t, b, c, d) {t /= d / 2if (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 = amountdocument.body.parentNode.scrollTop = amountdocument.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 - startconst increment = 20let currentTime = 0duration = (typeof (duration) === 'undefined') ? 500 : durationvar animateScroll = function() {// increment the timecurrentTime += increment// find the value with the quadratic in-out easing functionvar val = Math.easeInOutQuad(currentTime, start, change, duration)// move the document.bodymove(val)// do the animation unless its overif (currentTime < duration) {requestAnimFrame(animateScroll)} else {if (callback && typeof (callback) === 'function') {// the animation is done so lets callbackcallback()}}}animateScroll() }

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的ElementUI分页组件的封装的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。