<template>
<div class="paginationContainer">
<button :disabled="current === 1">上一页</button>
<button
v-if="startEnd.start > 1"
@click="current = 1"
:class="{ active: current === 1 }"
>
1
</button>
<button v-if="startEnd.start > 2">...</button>
<button
@click="current = item"
v-for="item in ergodicBtn"
:key="item"
:class="{ active: current === item }"
>
{{ item }}
</button>
<button v-if="startEnd.end < totalPage - 1">...</button>
<button
v-if="startEnd.end !== totalPage"
@click="current = totalPage"
:class="{ active: current === totalPage }"
>
{{ totalPage }}
</button>
<button :disabled="current === totalPage">下一页</button>
<button>总共{{ total }}条</button>
</div>
</template>
<script>
/**
* pageSize:9
* total:100
* 10
*/
export default {
name: 'Pagination',
data() {
return {
current: this.currentNum,
}
},
props: {
// 数据总共多少条
total: {
type: Number,
default: 100,
},
// 当前点击
currentNum: {
type: Number,
default: 5, // 2 ==> 1 2 3 4 5 5 ==>1 ... 3 4 5 6 7 ... 10
},
// 一页显示多少条
pageSize: {
type: Number,
default: 10,
},
// 连续页码数量
pagerCount: {
type: Number,
// 大于等于 5 且小于等于 21 的奇数
validator: (value) => {
return value >= 5 && value <= 21 && value % 2 === 1
},
default: 5,
},
},
computed: {
// 总共页码的数量
totalPage() {
return Math.ceil(this.total / this.pageSize)
},
startEnd() {
const { totalPage, current, pagerCount } = this
let start, end, needNum
// 先判断你的总的数据是否小于连续页码数量
// totalPage = 3 连续页码数量 5
// start = 1 end = 3
if (totalPage < pagerCount) {
start = 1
end = totalPage
} else {
/**
* 正常情况 连续页码数量 5
* 5 ==> 3 4 5 6 7
* 4 ==> 2 3 4 5 6
* start = currentNum - Math.floor(5 / 2)
end = currentNum + Math.floor(5 / 2)
*/
start = current - Math.floor(pagerCount / 2)
end = current + Math.floor(pagerCount / 2)
// 左侧范围限定
if (start < 1) {
/**
*
* start < 1
*
* 2 ==> 0 1 2 3 4 ==> 1 2 3 4 5
* 1 ==> -1 0 1 2 3 ==> 1 2 3 4 5
*/
needNum = 1 - start // 1 2
start += needNum // 1 1
end += needNum // 5 5
}
// 右侧范围限定
if (end > totalPage) {
/**
* 9 ==> 7 8 9 10 11 ==> 6 7 8 9 10
* 10 ==> 8 9 10 11 12 ==> 6 7 8 9 10
*/
needNum = end - totalPage // 11 - 10 ==> 1 12 - 10 ==> 2
start -= needNum // 6 6
end -= needNum // 10 10
}
}
return {
start,
end,
}
},
// 需要遍历的按钮
ergodicBtn() {
// 1 2 3 4 5 6 7 8 9 10 ==> start = 2 end = 6 => 2 3 4 5 6
let arr = []
const { start, end } = this.startEnd
for (let i = start; i <= end; i++) {
arr.push(i)
}
return arr
},
},
}
</script>
<style lang='less' scoped>
.paginationContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
button {
min-width: 30px;
height: 28px;
line-height: 28px;
text-align: center;
border: none;
outline: none;
border-radius: 2px;
margin-right: 5px;
background-color: #ccc;
cursor: pointer;
user-select: none;
& > :last-child {
margin-right: 0;
}
&:hover {
background-color: skyblue;
color: #fff;
}
&.active {
background-color: skyblue;
color: #fff;
}
&:disabled {
cursor: not-allowed;
}
}
}
</style>
手写分页器
最新推荐文章于 2024-05-03 15:43:47 发布