分页器封装业务分析:
封装分页器组件的时候:需要知道哪些条件?
1:分页器组件需要知道我一共展示多少条数据 ----total【100条数据】
2:每一个需要展示几条数据------pageSize【每一页3条数据】
3:需要知道当前在第几页-------pageNo【当前在第几页】
4:需要知道连续页码数------- --continues
【起始数字、结束数字:连续页码数市场当中一般5、7、9奇数,对称好看】
parseInt(),是Javascript内置函数,原型为parseInt ( String s , [ int radix ] ),用于解析一个字符串,并返回一个整数。
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5] startNumAndEndNum() { const { continues, pageNo, totalPage } = this; //先定义两个变量存储起始数字与结束数字 let start = 0, end = 0; //连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】 //不正常现象【总页数没有连续页码多】 if (continues > totalPage) { start = 1; end = totalPage; } else { //正常现象【连续页码5,但是你的总页数一定是大于5的】 //起始数字 start = pageNo - parseInt(continues / 2); //结束数字 end = pageNo + parseInt(continues / 2); //把出现不正常的现象【start数字出现0|负数】纠正 if (start < 1) { start = 1; end = continues; } //把出现不正常的现象[end数字大于总页码]纠正 if (end > totalPage) { end = totalPage; start = totalPage - continues + 1; } } return { start, end }; },
5.总共有多少页-------totalPage
//总共多少页 totalPage() { //向上取整 return Math.ceil(this.total / this.pageSize); },
分页器组件封装:
<template>
<div class="pagination">
<!-- 上 -->
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<button
v-if="startNumAndEndNum.start > 1"
@click="$emit('getPageNo', 1)"
:class="{ active: pageNo == 1 }"
>
1
</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<!-- 中间部分 -->
<button
v-for="(page, index) in startNumAndEndNum.end"
:key="index"
v-if="page >= startNumAndEndNum.start"
@click="$emit('getPageNo', page)"
:class="{ active: pageNo == page }"
>
{{ page }}
</button>
<!-- 下 -->
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button
v-if="startNumAndEndNum.end < totalPage"
@click="$emit('getPageNo', totalPage)"
:class="{ active: pageNo == totalPage }"
>
{{ totalPage }}
</button>
<button
:disabled="pageNo == totalPage"
@click="$emit('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);
},
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
startNumAndEndNum() {
const { continues, pageNo, totalPage } = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
//连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】
//不正常现象【总页数没有连续页码多】
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
//正常现象【连续页码5,但是你的总页数一定是大于5的】
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo + parseInt(continues / 2);
//把出现不正常的现象【start数字出现0|负数】纠正
if (start < 1) {
start = 1;
end = continues;
}
//把出现不正常的现象[end数字大于总页码]纠正
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
}
return { start, end };
},
},
};
</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: #ff6d40;
color: #fff;
}
}
}
.active {
background: rgb(252, 132, 12);
}
</style>
并通过父子组件通信:
<Pagination
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total"
:continues="5"
@getPageNo="getPageNo"
/>
//自定义事件的回调函数---获取当前第几页
getPageNo(pageNo) {
//整理带给服务器参数
this.searchParams.pageNo = pageNo;
//再次发请求
this.getData();
},