前言
分页是开发各种系统时候最常用的功能，下面为本人封装的一个分页组件。
实现分页器操作需要以下参数
- 当前页： pageNo
- 每页展示条数： pageSize
- 数据总条数 ： total
- 连续页码数：continues （一般为奇数，页面对称更美观）
分页器在各大项目中出现的频率较多，我们可以封装成静态组件，并全局注册这个组件。
1.全局注册组件方法：在mian.js文件中操作
import Pagination from '@/components/Pagination' // 组件路径 Vue.component(Pagination.name,Pagination)
2.其他页面分页器的时候可以直接使用。父页面向子页面传递数据，使用prop传递。
<template>
<Pagination
:pageNo="this.pageNo"
:pageSize="this.pageSize"
:total="93"
:continues="5"
@getPageNo="getPageNo"
/>
</template>
<script>
export default {
name: "index",
data(){
return{
pageNo:1,
pageSize:4,
}
},
methods:{
getPageNo(pageNo){
this.pageNo=pageNo
}
}
}
</script>
分页器 Pagination.vue
<template>
<div class="pagination">
<!-- 上 -->
<button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
上一页
</button>
<button
v-if="startNumAndEndNum.start > 1"
@click="getPageNo(1)"
:class="{ active: pageNo == 1 }"
>1
</button>
<button
v-if="startNumAndEndNum.start > 2"
@click="getPageNo(pageNo - continues)"
>···
</button>
<!-- 中间部分 -->
<button
v-for="(page, index) in generateMiddlePage"
:key="index"
@click="getPageNo(page)"
:class="{ active: pageNo == page }">
{{ page }}
</button>
<!-- 下 -->
<button
v-if="startNumAndEndNum.end < totalPage - 1"
@click="getPageNo(pageNo continues)"
>···
</button>
<button
v-if="startNumAndEndNum.end < totalPage"
@click="getPageNo(totalPage)"
:class="{active:pageNo==totalPage}">
{{ totalPage }}
</button>
<button
:disabled="pageNo == totalPage"
@click="getPageNo(pageNo 1)">
下一页
</button>
<button style="margin-left: 30px">共 {{ total }} 条</button>
</div>
</template>
<script>
export default {
name: "Pagination",
props: ["pageNo", "pageSize", "total", "continues"],
computed: {
//计算出总页数
totalPage() {
//向上取整
return Math.ceil(this.total / this.pageSize);
},
//计算出页码的起始和结束数字
startNumAndEndNum() {
const {continues, pageNo, totalPage} = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo parseInt(continues / 2);
if (start < 1) {
start = 1;
end = continues;
}
if (end > totalPage) {
end = totalPage;
start = totalPage - continues 1;
}
}
return {start, end};
},
//过滤掉小于起始页的页码
generateMiddlePage() {
let arr = [];
//避免页面中同时使用 v-for和v-if
for (let i = 0; i <= this.startNumAndEndNum.end; i ) {
arr.push(i)
}
let temp = arr.filter(item => {
return item >= this.startNumAndEndNum.start
})
return temp
}
}，
methods: {
getPageNo(val) {
//自定义事件子页面向父页面传参，计算属性值
this.$emit('getPageNo', val)
},
}
};
</script>
<style lang="less" scoped>
.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;
}
</style>
总结
到此这篇关于vue封装自定义分页器组件与使用方法的文章就介绍到这了,更多相关vue封装自定义分页器组件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！