<template>
<div class="pagination">
<!-- 上 -->
<button :disabled="pageNo==1" @click="selectPage(pageNo-1)">上一页</button>
<button
v-show="startAndEnd.start!=1 && total>0"
@click="selectPage(1)"
:class="{active:pageNo==1}"
>1</button>
<button v-show="startAndEnd.start>2">···</button>
<!-- 中间部分 -->
<!-- {{continuesPages}} -->
<button
v-for="(page,idx) in continuesPages"
:key="idx"
@click="selectPage(page)"
:class="{active:pageNo==page}"
>{{page}}</button>
<!-- 下 -->
<button v-show="startAndEnd.end < totalPage - 1">···</button>
<button
v-show="startAndEnd.end != totalPage"
@click="selectPage(totalPage)"
:class="{active:pageNo==totalPage}"
>{{totalPage}}</button>
<button :disabled="pageNo==totalPage" @click="selectPage(pageNo + 1)">下一页</button>
<button>共 {{total}} 条</button>
</div>
</template>
<script>
export default {
name: "Pagination2",
props: ["pageNo", "pageSize", "total", "continues"],
methods: {
selectPage(pageNo) {
if (pageNo != this.pageNo) {
this.$emit("selectPage", pageNo);
}
},
},
computed: {
totalPage() {
return Math.ceil(this.total / this.pageSize);
},
startAndEnd() {
const { pageNo, pageSize, total, continues, totalPage } = this;
let start = 0,
end = 0;
// 总页码数 小于或等于 须连续的页码数
if (totalPage <= continues) {
start = 1;
end = totalPage;
} else {
// 总页码数 大于 须连续的页码数
let diff = Math.floor(continues / 2);
console.log("diff", diff);
console.log(pageNo, pageSize, total, continues, totalPage);
// 边界位置处理
if (pageNo - diff < 1) {
start = 1;
end = continues;
} else if (pageNo + diff > totalPage) {
start = totalPage - continues + 1;
end = totalPage;
} else {
start = pageNo - diff;
end = pageNo + diff;
}
}
return {
start,
end,
};
},
continuesPages() {
// start肯定不等于end
const { start, end } = this.startAndEnd;
console.log(this.startAndEnd);
let pages = [];
for (let i = start; i <= end; i) {
pages.push(i);
i++;
}
return pages;
},
},
};
</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: #409eff;
color: #fff;
}
}
}
.active {
background: skyblue;
}
</style>
Vue分页组件
最新推荐文章于 2024-04-17 19:26:37 发布