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为获取列表的方法，在改变条数或者页数的时候触达
vue分页组件，可直接使用相关推荐
- 项目总结-vue分页组件集成
项目总结-vue分页组件集成 后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
- antd design vue分页组件
我们在使用分页组件的时候可以有两种方法: 第一种是直接用表格()的自定义:pagination属性最方便:如下图所示: 第二种是分页组件 这里我总结的是第二种方法的使用,由于是 Ant Design ...
- Vue 分页组件的封装
前言 这个是基于vue2的分页封装,仿照elementUI而写的组件. 效果如图 话不多说,直接上代码 <template><div class="pagination&q ...
- Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
- Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装 修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
- Vue.js分页组件实现：diVuePagination
为什么80%的码农都做不了架构师?>>> 完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...
- vue.js分页组件(新手学习记录)
先说明页码总数是从接口返回的参数中获取的 页码是自己定义并赋值到url中,获取指定页的数据 首先新建一个page.vue组件 HTML部分,这里用了bootstrap4.0,就不去写样式了 <t ...
- vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
最新文章
- 微软更新Linux子系统，编译WSL 2内核只需3步
- mysql 分时统计_mysql中数据统计的技巧备忘录
- 基于php的足球联赛接口调用,足球数据API接口 - 【队员资料】API调用示例代码
- C# 繁体,简体互转
- UITextView
- DNS和活动目录的关系
- Unity VideoPlayer组件一个接一个的播放视频
- pdf怎么解除限制打印
- Adobe Experience Cloud落地中国，Adobe、微软与世纪互联共庆三方合作
- 电脑位数（32位或者64位）问题导致eclipse不能正常启动
- 为您创建完美商业标识的 10 款 Logo 设计软件 【已翻译100%】
- 论文阅读笔记（11）：Adaptive Self-Paced Deep Clustering with Data Augmentation，用数据增强的自适应Self-Paced深度聚类
- LR杂记--Loadrunner分析系统资源
- AMR NB格式解析
- 基于工作行为的研发管理体系设计及实践
- Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放
- OCR文字识别工具，轻松帮你识别图片上的文字
- 【支付系统学习笔记】-二支付系统设计（支付路由设计）
- 几款主流的App统计工具解析：友盟、Talking Data、openinstall...
- vps测试之ping值检测方法，这样才好用