vue封装自定义分页器组件与使用方法分享 vue封装自定义分页器组件与使

前言
【vue封装自定义分页器组件与使用方法分享】分页是开发各种系统时候最常用的功能，下面为本人封装的一个分页组件。
实现分页器操作需要以下参数

当前页： pageNo
每页展示条数： pageSize
数据总条数： total
连续页码数：continues （一般为奇数，页面对称更美观）

分页器在各大项目中出现的频率较多，我们可以封装成静态组件，并全局注册这个组件。
1.全局注册组件方法：在mian.js文件中操作

import Pagination from '@/components/Pagination'// 组件路径Vue.component(Pagination.name,Pagination)

2.其他页面分页器的时候可以直接使用。父页面向子页面传递数据，使用prop传递。

分页器 Pagination.vue

.pagination {text-align: center; button {margin: 0 5px; background-color: #f4f4f5; color: #606266; outline: none; border-radius: 2px; padding: 0 4px; vertical-align: top; display: inline-block; font-size: 13px; min-width: 35.5px; height: 28px; line-height: 28px; cursor: pointer; box-sizing: border-box; text-align: center; border: 0; &[disabled] {color: #c0c4cc; cursor: not-allowed; }&.active {cursor: not-allowed; background-color: #409eff; color: #fff; }}}.active {background: skyblue; }

总结
到此这篇关于vue封装自定义分页器组件与使用方法的文章就介绍到这了,更多相关vue封装自定义分页器组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！