2 changed files with 280 additions and 22 deletions
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<div class="pagination"> |
||||
|
<!-- 首页按钮 --> |
||||
|
<button |
||||
|
v-if="showHome" |
||||
|
@click="goToFirstPage" |
||||
|
class="pagination-button" |
||||
|
> |
||||
|
首页 |
||||
|
</button> |
||||
|
|
||||
|
<!-- 上一页按钮 --> |
||||
|
<button |
||||
|
v-if="showPrev" |
||||
|
@click="goToPrevPage" |
||||
|
class="pagination-button" |
||||
|
> |
||||
|
上一页 |
||||
|
</button> |
||||
|
|
||||
|
<!-- 当前页码显示 --> |
||||
|
<span v-if="showCurrent" class="current-page">第{{ currentPage }}页</span> |
||||
|
|
||||
|
<!-- 下一页按钮 --> |
||||
|
<button |
||||
|
v-if="showNext" |
||||
|
@click="goToNextPage" |
||||
|
class="pagination-button" |
||||
|
> |
||||
|
下一页 |
||||
|
</button> |
||||
|
|
||||
|
<!-- 尾页按钮/状态 --> |
||||
|
<button |
||||
|
v-if="showLastButton" |
||||
|
@click="goToLastPage" |
||||
|
class="pagination-button" |
||||
|
> |
||||
|
尾页 |
||||
|
</button> |
||||
|
<span v-if="showLastText" class="last-page">尾页</span> |
||||
|
|
||||
|
<!-- 尾页时的页码显示 --> |
||||
|
<span v-if="endPageFlag" class="last-page-number">第{{ totalPages }}页</span> |
||||
|
|
||||
|
<!-- 跳转控件 --> |
||||
|
<div class="page-jump"> |
||||
|
<input |
||||
|
type="number" |
||||
|
v-model="jumpPage" |
||||
|
min="1" |
||||
|
class="jump-input" |
||||
|
> |
||||
|
<button @click="handleJump" class="jump-button">跳转</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 尾页时的总记录数 --> |
||||
|
<span v-if="endPageFlag" class="total-records">共{{ totalRecords }}条记录</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Pagination', |
||||
|
props: { |
||||
|
// 总记录数 |
||||
|
totalRecords: { |
||||
|
type: [Number,String], |
||||
|
required: true, |
||||
|
default: 0 |
||||
|
}, |
||||
|
// 总页数 |
||||
|
totalPages: { |
||||
|
type: [Number,String], |
||||
|
required: true, |
||||
|
default: 1 |
||||
|
}, |
||||
|
// 当前页码 |
||||
|
currentPage: { |
||||
|
type: [Number,String], |
||||
|
required: true, |
||||
|
default: 1 |
||||
|
}, |
||||
|
// 用于下一页的minid |
||||
|
nextMinId: { |
||||
|
type: [Number,String], |
||||
|
default: null |
||||
|
}, |
||||
|
// 用于上一页的maxid |
||||
|
prevMaxId: { |
||||
|
type: [Number,String], |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
endPageFlag: false, // 尾页标识 |
||||
|
jumpPage: null // 跳转页码 |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 是否显示首页按钮 |
||||
|
showHome() { |
||||
|
return this.currentPage > 1; |
||||
|
}, |
||||
|
// 是否显示上一页按钮 |
||||
|
showPrev() { |
||||
|
return this.currentPage > 1; |
||||
|
}, |
||||
|
// 是否显示当前页码 |
||||
|
showCurrent() { |
||||
|
return !this.endPageFlag; |
||||
|
}, |
||||
|
// 是否显示下一页按钮 |
||||
|
showNext() { |
||||
|
return !this.endPageFlag; |
||||
|
}, |
||||
|
// 是否显示尾页按钮 |
||||
|
showLastButton() { |
||||
|
return !this.endPageFlag; |
||||
|
}, |
||||
|
// 是否显示尾页文本 |
||||
|
showLastText() { |
||||
|
return this.endPageFlag; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 跳转到首页 |
||||
|
goToFirstPage() { |
||||
|
this.endPageFlag = false; |
||||
|
this.$emit('page-change', { |
||||
|
page: 1, |
||||
|
isFirst: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到上一页 |
||||
|
goToPrevPage() { |
||||
|
this.endPageFlag = false; |
||||
|
this.$emit('page-change', { |
||||
|
page: this.currentPage - 1, |
||||
|
maxid: this.prevMaxId, |
||||
|
isPrev: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到下一页 |
||||
|
goToNextPage() { |
||||
|
this.endPageFlag = false; |
||||
|
this.$emit('page-change', { |
||||
|
page: this.currentPage + 1, |
||||
|
minid: this.nextMinId, |
||||
|
isNext: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到尾页 |
||||
|
goToLastPage() { |
||||
|
this.endPageFlag = true; |
||||
|
this.$emit('page-change', { |
||||
|
page: this.totalPages, |
||||
|
isLast: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 处理跳转 |
||||
|
handleJump() { |
||||
|
if (!this.jumpPage || this.jumpPage < 1) { |
||||
|
return; |
||||
|
} |
||||
|
if (this.totalPages > 0 && this.jumpPage > this.totalPages) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.endPageFlag = this.jumpPage === this.totalPages; |
||||
|
|
||||
|
this.$emit('page-change', { |
||||
|
page: this.jumpPage, |
||||
|
isJump: true |
||||
|
}); |
||||
|
|
||||
|
this.jumpPage = null; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
margin-top: 20px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.pagination-button { |
||||
|
padding: 6px 12px; |
||||
|
border: 1px solid #ddd; |
||||
|
background: #f8f8f8; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.pagination-button:hover { |
||||
|
background: #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.current-page, .last-page, .last-page-number, .total-records { |
||||
|
padding: 0 8px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.page-jump { |
||||
|
display: flex; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.jump-input { |
||||
|
width: 50px; |
||||
|
padding: 4px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 4px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.jump-button { |
||||
|
padding: 4px 8px; |
||||
|
border: 1px solid #ddd; |
||||
|
background: #f0f0f0; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.jump-button:hover { |
||||
|
background: #e0e0e0; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue