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