先看一下效果
Snipaste_2021-06-04_10-12-54.png
样式分析
- 一个分页器首先需要上一页，下一页，中间的页码，以及数据的总条数
- 当前页高亮显示，还有不能点击的按钮，能点击的按钮
静态样式 Pageination.vue
<template>
<div class="pageination">
<button>上一页</button>
<button>1</button>
<button>...</button>
<button class="disabled">3</button>
<button>4</button>
<button class="active">5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>...</button>
<button class="disabled">12</button>
<button>下一页</button>
<button class="disabled">共 20 条</button>
</div>
</template>
<script>
export default {
name: "Pageination"
</script>
<style lang="less" scoped>
.pageination {
button {
margin: 0 5px;
background-color: #f4f4f5;
color: #606266;
outline: none;
border-radius: 2px;
pad: 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;
&.active {
background-color: #409eff;
color: #fff;
cursor: not-allowed;
}
&.disabled {
cursor: not-allowed;
color: #ccc;
}
}
}
</style>
使用
- 注册组件
Vue.component(Pageination.name, Pageination)
- 使用
通过父组件向分页组件传值，这里使用props，父组件需要向分页组件传入响应的数据
<Pagination
:currentPage="xxx"
:total="xxx"
:pageSize="xxx"
:showPageNo="xxx"
@currentChange="xxxxxx"
></Pagination>
/**
* currentPage: 当前页码，就是当前页面是第几页
* total: 总数量，比如搜索出的结果一共有多少条
* pageSize: 每一页显示的数据条数
* showPageNo: 连续页码数
* currentChange：页码发生变化时触发的事件
*/
showPageNo: 连续页码的意思是，当我们分页过多时，全部显示出来就会显得不好看，取值为奇数。假如连续页码取值为3，当前页是4，那么就显示第3，4，5页码，第一页和最后一页保留，其他页使用“...”折叠
Snipaste_2021-06-04_10-40-24.png
- 分页组件的props ------> Pageination.vue
export default {
props: {
currentPage: {
// 限制参数类型
type: Number,
// 设置默认值
default: 1,
},
total: {
type: Number,
default: 0,
},
pageSize: {
type: Number,
default: 10,
},
showPageNo: {
type: Number,
default: 5,
// prop自定义验证函数
// 官网：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81
validator: function (value) {
return value % 2 === 1;
},
},
}
}
计算 ----------> Pageination.vue
有些属性，需要已知的数据进行计算得来，在分页组件中使用计算属性
data() {
return {
// this.currentPage就是props里面传过来的
myCurrentPage: this.currentPage
};
},
computed: {
// 总页数 = 总数据数 / 每页显示的数据条数
// 最后结果使用向上取整，因为pageSize 只是每页最大显示的条数，不够整除，余下的数据也应自成一页
totalPage() {
const { total, pageSize } = this;
return Math.ceil(total / pageSize);
},
// 设置连续页码的起始和结束的页码
startEnd() {
// 获取计算依赖项
const { myCurrentPage, showPageNo, totalPage } = this;
let start, end;
/**
* 起始页码就是用当前页码减去最大连续页码除以2并向下取整的结果。
* 如：showPageNo=3，当前页是4，那么起始页码就应该是3，4- Math.floor(3/ 2)=4-1=3
* 当然start是有边界的，当他小于一了就强制变成1
*/
start = myCurrentPage - Math.floor(showPageNo / 2);
if(start < 1){
start = 1
}
/**
* 结束页码就可以利用起始页码进行计算
*/
end = start + showPageNo - 1
/**
* 结束页码的边界值就是当他超过总页数
* 如：总页数为10，当前页是9，最大连续页码是5，
* 这时候算出来的start = 9 - 2 = 7，end = 7 + 5 -1 = 11 > 10, 所以需要修正
* end修正之后，start和end的间距就不是设置的showPageNo 了，
* start也要修改，使用end反推start，start = end - showPageNo 这样子多剪了一个1，后面还要加上，同样的，要对边界值判断
*/
if(end > totalPage){
// 修改end为totalPage
end = totalPage
// reset start
start = end - showPageNo + 1
if(start < 1){
start = 1
}
}
return { start, end };
},
},
完整的js程序
<script>
export default {
name: "Pageination",
props: {
currentPage: {
type: Number,
default: 1,
},
total: {
type: Number,
default: 0,
},
pageSize: {
type: Number,
default: 10,
},
showPageNo: {
type: Number,
default: 5,
validator: function (value) {
return value % 2 === 1;
},
},
},
data() {
return {
myCurrentPage: this.currentPage,
};
},
mounted(){
console.log(this);
},
computed: {
totalPage() {
const { total, pageSize } = this;
return Math.ceil(showPageNo);
},
startEnd() {
const { myCurrentPage, showPageNo, totalPage } = this;
let start, end;
start = myCurrentPage - Math.floor(showPageNo / 2);
if(start < 1){
start = 1
}
end = start + showPageNo - 1
if(end > totalPage){
end = totalPage
start = end - showPageNo + 1
if(start < 1){
start = 1
}
}
return { start, end };
},
},
};
</script>
