<template>
<div class="pageContainer">
<span class="total">共{{ total }}条记录</span>
<ul class="pagesInner">
<li class="pageFirst" @click="select(1)">首页</li>
<li class="pagePrev" @click="prevOrNext(-1)">
<img src="@/assets/img/pc/page-left.png" alt="" />
</li>
<li
class="page"
v-for="(item, index) in pages"
:key="index"
:class="{ active: item === currentPage }"
>
<span v-if="item === '...'">{{ item }}</span>
<span class="pageNum" v-else @click="select(item)">{{ item }}</span>
</li>
<li class="pageNext" @click="prevOrNext(1)">
<img src="@/assets/img/pc/page-right.png" alt="" />
</li>
<li class="pageLast" @click="select(Math.ceil(total /pageSize))">尾页</li>
</ul>
</div>
</template>
<script>
export default {
name: "page",
props: {
total: {
type: Number,
default: 5,
},
currentPage: {
// 当前页码
type: Number,
default: 1,
},
pageSize: {
type: Number,
default: 5,
},
},
computed: {
pages() {
const c = this.currentPage;
const t = this.total;
const s = this.pageSize;
if (t > 7 * s) {
if (c <= 5) {
return [1, 2, 3, 4, 5, "...", t]; //第一种情况
} else if (c >= t - 4) {
return [1, "...", t - 5, t - 4, t - 3, t - 2, t - 1, t]; //第二种情况
} else {
return [1, "...", c - 2, c - 1, c, c + 1, c + 2, "...", t]; //第三种情况
}
} else {
let arr = [];
for (let i = 1; i <= Math.ceil(t / s); i++) {
arr.push(i);
}
return arr;
}
},
},
methods: {
select(n) {
if (n === this.currentPage) return;
if (typeof n === "string") return;
this.$emit("pageChange", n);
},
prevOrNext(n) {
this.$emit("prevOrNext", n);
},
},
};
</script>
<style scoped lang="less">
.pageContainer {
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #808080;
span.total {
margin-right: 1rem;
}
.pagesInner {
display: flex;
align-items: center;
background: #fff;
li {
&.pagePrev,
&.pageNext {
width: 1.5rem;
height: 1.5rem;
border: solid 0.063rem #aaaaaa;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
// margin: 0 1rem;
img {
width: 0.4rem;
height: auto;
}
}
&.pagePrev {
// margin-right: 1rem;
}
&.pageNext {
margin-left: 1rem;
}
&.pageFirst,
&.pageLast {
margin: 0 1rem;
cursor: pointer;
}
span.pageNum {
cursor: pointer;
margin: 0 5px;
border-radius: 4px;
width: 1.5rem;
height: 1.5rem;
display: inline-block;
}
&.page {
width: 1.5rem;
height: 1.5rem;
text-align: center;
line-height: 1.5rem;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
&.active {
color: #017afd;
}
}
}
}
</style>
Pagination 分页 组件
于 2023-12-07 11:46:01 首次发布