初始静态分页器,假数据
父组件
<!-- 分页器 测试分页器阶段,这里的数据需要替换 -->
<Pagination
:pageNo = '28'
:pageSize = '3'
:total = '91'
:pageCount = '5'
/>
单独组件 html
<template>
<div class="pagination">
<!-- 上 -->
<button>上一页</button>
<button v-if="startAndEnd.start >1">1</button>
<button v-if="startAndEnd.start >2">...</button>
<!-- 中间结构 -->
<button v-for="(page,index) in startAndEnd.end" :key="index" v-if=" page >= startAndEnd.start">{{ page }}</button>
<!-- 下 -->
<button v-if="startAndEnd.end < totalPage - 1">...</button>
<button v-if="startAndEnd.end < totalPage">{{ totalPage }}</button>
<button>下一页</button>
<button style="margin-left: 30px">共 {{ total }} 条</button>
</div>
</template>
单独组件 JS
<script>
export default {
name: "Pagination",
props: ["pageNo", "pageSize", "total", "pageCount"],
computed: {
//分页器一共多少页【总条数/每页展示条数】
totalPage() {
//向上取整数
return Math.ceil(this.total / this.pageSize);
},
//底下的代码是整个分页器最重要的地方[算出连续五个数字、开头、结尾]
startAndEnd() {
//算出连续页码:开始与结束这两个数字
let start = 0, end = 0;
const { totalPage, pageCount, pageNo } = this;
//连续页数为5,总页数不够5页,不正常现象
if(pageCount > totalPage){
start = 1;
end = totalPage;
}else{
//正常现象,大于5页
start = pageNo - parseInt(pageCount/2);
end = pageNo + parseInt(pageCount/2);
//约束start|end在合理范围之内
//约束头部
if (start < 1) {
start = 1;
end = pageCount;
}
//约束尾部
if (end > totalPage) {
end = totalPage;
start = totalPage - pageCount + 1;
}
}
return { start, end };
}
},
};
</script>
单独组件 样式css
<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;
}
}
}
</style>