1、page.vue組件

<template><div class="greenpage"><!-- :layout="layout" --><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":page-sizes="pageSizes":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 [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> .greenpage /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #007f69;color: #FFFFFF; } </style>

2、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() }

3、使用組件頁面

<Pagev-show="total > 0":total="total":page.sync="pageList.pageNum":limit.sync="pageList.pageSize":page-sizes="pageList.pageSizes"@pagination="getList"/>export default {data(）{return {// 總條數total: 0,// 查詢參數pageList: {pageNum: 1,pageSize: 10,pageSizes: [10, 20, 40, 60],},}} }

總結

以上是生活随笔為你收集整理的vue分页组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。