<template>
<div
class="pager-cn"
v-if="total>0"
>
<span
class="page-btn pre-btn"
:class="{ 'disabled-btn': pageList.currentPage == 1 }"
@click="onPrePage"
>
<i aria-label="图标: left"><svg
viewBox="64 64 896 896"
data-icon="left"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
focusable="false"
class=""
>
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
</svg></i></span>
<ul class="page-list">
<li
class="page-btn"
:class="{ 'selected-page': page == pageList.currentPage }"
v-for="(page, index) in pageList.list"
:key="index"
@click="onChangePage(page)"
>
<span>{{ page }}</span>
</li>
</ul>
<span
class="page-btn next-btn"
:class="{ 'disabled-btn': pageList.currentPage == pageList.totalPage }"
@click="onNextPage"
><i aria-label="图标: right"><svg
viewBox="64 64 896 896"
data-icon="right"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
focusable="false"
class=""
>
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
</svg></i></span>
</div>
</template>
<script>
export default {
name: "",
props: {
// 当前页码
currentPage: {
type: Number,
default: 1,
},
// 总条数
total: {
type: Number,
default: 0,
},
// 分页器每行最多显示多个页签
pageRowNumber: {
type: Number,
default: 10,
},
},
components: {},
data() {
return {
pageList: {
list: [],
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
totalPage: 0, // 总页数
total: 0, // 总条数
pageRowNumber: 10, // 分页器显示的页码数量
},
};
},
watch: {
pageRowNumber: {
handler(value) {
this.pageList.pageRowNumber = value;
},
immediate: true
},
total: {
handler(value) {
this.pageList.total = value;
// 计算总页数
this.pageList.totalPage = Math.ceil(value / this.pageList.pageSize);
console.log("this.pageList.totalPage", this.pageList.totalPage);
this.handleCurrent(1);
},
immediate: true
},
currentPage: {
handler(value) {
this.handleCurrent(value);
},
immediate: true
},
},
computed: {},
created() {},
methods: {
onPrePage() {
if (this.pageList.currentPage === 1) {
return;
}
this.$emit("pageChange", this.pageList.currentPage - 1);
},
onNextPage() {
if (this.pageList.currentPage === this.pageList.totalPage) {
return;
}
console.log(this.pageList.currentPage);
this.$emit("pageChange", this.pageList.currentPage + 1);
},
onChangePage(page) {
if (page === this.pageList.currentPage) {
return;
}
this.$emit("pageChange", page);
},
handleCurrent(value) {
this.pageList.currentPage = value;
this.pageList.list = [];
// 总页数小于等于每行显示的页码数量时，直接显示所有页码
if (this.pageList.totalPage <= this.pageList.pageRowNumber) {
console.log("直接显示所有页码", this.pageList.totalPage, this.total);
for (let i = 1; i <= this.pageList.totalPage; i++) {
this.pageList.list.push(i);
}
} else {
// 当前页码小于等于每行显示的页码数量的一半时，显示前{ pageRowNumber }页
if (value <= Math.floor(this.pageList.pageRowNumber / 2)) {
for (let i = 1; i <= this.pageList.pageRowNumber; i++) {
this.pageList.list.push(i);
}
}
// 当前页码大于总页数减去每行显示的页码数量的一半时，显示后{ pageRowNumber }页
else if (
value >
this.pageList.totalPage - Math.floor(this.pageList.pageRowNumber / 2)
) {
for (
let i = this.pageList.totalPage;
i > this.pageList.totalPage - this.pageList.pageRowNumber;
i--
) {
this.pageList.list.unshift(i);
}
}
// 当前页码在中间时，显示当前页的前后{ pageRowNumber }页
else {
// 每行显示的数量为奇数时
if (this.pageList.pageRowNumber % 2 === 0) {
for (
let i =
this.pageList.currentPage -
Math.floor(this.pageList.pageRowNumber / 2);
i <
this.pageList.currentPage +
Math.floor(this.pageList.pageRowNumber / 2);
i++
) {
this.pageList.list.push(i);
}
}
// 每行显示的数量为偶数时
else {
for (
let i =
this.pageList.currentPage -
Math.floor(this.pageList.pageRowNumber / 2);
i <=
this.pageList.currentPage +
Math.floor(this.pageList.pageRowNumber / 2);
i++
) {
this.pageList.list.push(i);
}
}
}
}
},
},
};
</script>
<style lang="less" scoped>
.pager-cn {
margin: 10px auto 0;
text-align: center;
.page-btn {
font-size: 12px;
display: inline-block;
text-align: center;
user-select: none;
cursor: pointer;
padding: 0 6px;
min-width: 32px;
height: 32px;
font-family: Arial;
line-height: 30px;
text-align: center;
vertical-align: middle;
list-style: none;
background-color: #fff;
border: 1px solid #e8eaf2;
border-radius: 0px;
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
&.selected-page,
&:hover {
font-weight: 500;
background: #fff;
border-color: #6176ff;
color: #8a9dff;
}
}
.pre-btn,
.next-btn {
min-width: 28px;
}
.disabled-btn,
.disabled-btn:hover {
color: #e8eaf2;
border-color: #e8eaf2;
}
.page-list {
margin: 0 6px;
display: inline-block;
.page-btn {
margin-right: 6px;
}
.page-btn:last-child {
margin-right: 0;
}
}
}
</style>效果如下
