<template>
|
<div class="pagination">
|
<button :disabled="currentPage === 1" @click="prevPage">上一页</button>
|
<!-- <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span> -->
|
<view class="page">
|
<span> {{ currentPage }} </span> / {{ totalPages }}
|
</view>
|
<button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
totalItems: {
|
type: Number,
|
required: true
|
},
|
itemsPerPage: {
|
type: Number,
|
default: 10
|
},
|
currentPage: {
|
type: Number,
|
default: 1
|
}
|
},
|
computed: {
|
totalPages() {
|
return Math.ceil(this.totalItems / this.itemsPerPage);
|
}
|
},
|
methods: {
|
prevPage() {
|
if (this.currentPage > 1) {
|
this.$emit('page-change', this.currentPage - 1);
|
}
|
},
|
nextPage() {
|
if (this.currentPage < this.totalPages) {
|
this.$emit('page-change', this.currentPage + 1);
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.pagination {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
margin: 20px 0;
|
}
|
|
.pagination button {
|
appearance: none; /* 移除浏览器默认样式 */
|
padding: 0 15px;
|
margin: 0 5px;
|
cursor: pointer;
|
background: #3D9AFF;
|
color: #FFFFFF;
|
}
|
|
.pagination button[disabled]{
|
cursor: not-allowed; /* 禁用鼠标样式 */
|
background: white !important; /* 强制覆盖背景颜色 */
|
color: #666666 !important; /* 强制覆盖文字颜色 */
|
}
|
|
.pagination .page {
|
margin: 0 10px;
|
}
|
.pagination .page span {
|
color: #3D9AFF;
|
}
|
</style>
|
