Paging component <template> <div> <div class="page-helper" v-if="showPageHelper"> <div
class="page-list"> <span> common{{ totalPage }} page / {{ totalCount }} strip</span> <span
class="page-item" @click="jumpPage(1)"> home page</span> <span class="page-item"
:class="{'disabled': currentPage === 1}" @click="prevPage"> Previous page</span> <span
class="page-ellipsis" v-if="showPrevMore" @click="showPrevPage">...</span>
<span class="page-item" v-for="num in groupList"
:class="{'page-current':currentPage===num}" :key="num"
@click="jumpPage(num)">{{num}}</span> <span class="page-ellipsis"
v-if="showNextMore" @click="showNextPage">...</span> <span class="page-item"
:class="{'disabled': currentPage === totalPage}" @click="nextPage"> next page</span>
<span class="page-item" @click="jumpPage(totalPage)"> Last</span> <select
class="page-select" @change="jumpPage(currentPage)" v-model="currentSize">
<option v-for="size in pageSizeArray" :key="size" :value="size">{{ size
}} strip/ page</option> </select> <span class="ml20"> Jump to</span> <span
class="page-jump-to"><input type="type" v-model="jumpPageNumber"></span>
<span> page</span> <span class="page-item jump-go-btn"
@click="goPage(jumpPageNumber)">GO</span> </div> </div> </div> </template>
<script> export default { name: 'pageHelper', data () { return { currentPage:
this.pageNumber, currentSize: this.pageSizeArray[0], jumpPageNumber: 1,
showPrevMore: false, showNextMore: false } }, props: { pageNumber: { // Current page
type: Number, default: 1 }, pageSizeArray: { // Display quantity per page type: Array, default () {
return [10,20,30,50] } }, totalCount: { // Total number type: Number, default: 1000 },
pageGroup: { // Number of consecutive pages type: Number, default: 5 } }, computed: { showPageHelper
() { return this.totalCount > 0 }, totalPage () { // PageCount return
Math.ceil(this.totalCount / this.currentSize); }, groupList () { // Get sub page number const
groupArray = [] const totalPage = this.totalPage const pageGroup =
this.pageGroup const _offset = (pageGroup - 1) / 2 let current =
this.currentPage const offset = { start: current - _offset, end: current +
_offset } if (offset.start < 1) { offset.end = offset.end + (1 - offset.start)
offset.start = 1 } if (offset.end > totalPage) { offset.start = offset.start -
(offset.end - totalPage) offset.end = totalPage } if (offset.start < 1)
offset.start = 1 this.showPrevMore = (offset.start > 1) this.showNextMore =
(offset.end < totalPage) for (let i = offset.start; i <= offset.end; i++) {
groupArray.push(i) } return groupArray } }, methods: { prevPage () { if
(this.currentPage > 1) { this.jumpPage(this.currentPage - 1) } }, nextPage () {
if (this.currentPage < this.totalPage) { this.jumpPage(this.currentPage + 1) }
}, showPrevPage() { this.currentPage = this.currentPage - this.pageGroup > 0 ?
this.currentPage - this.pageGroup : 1 }, showNextPage() { this.currentPage =
this.currentPage + this.pageGroup < this.totalPage ? this.currentPage +
this.pageGroup : this.totalPage }, goPage (jumpPageNumber) {
if(Number(jumpPageNumber) <= 0){ jumpPageNumber = 1 }if(Number(jumpPageNumber)
>= this.totalPage){ jumpPageNumber = this.totalPage }
this.jumpPage(Number(jumpPageNumber)) }, jumpPage (pageNumber) { if
(this.currentPage !== pageNumber) { // The page number you clicked is not the current page number this.currentPage = pageNumber
// Parent component passedchange Method to accept the current page number this.$emit('jumpPage', {currentPage: this.currentPage,
currentSize: this.currentSize}) } } }, watch: { currentSize (newValue,
oldValue) { if(newValue !== oldValue){ if(this.currentPage >= this.totalPage){
// The current page is greater than the total number of pages this.currentPage = this.totalPage } this.$emit('jumpPage',
{currentPage: this.currentPage, currentSize: this.currentSize}) } } } }
</script> <style scoped> .page-helper { font-weight: 500; height: 40px;
text-align: center; color: #888; margin: 10px auto; } .page-list { font-size:
0; height: 50px; line-height: 50px; } .page-list span { font-size: 14px;
margin-right: 5px; user-select: none; } .page-list .page-item { border: 1px
solid #aaa; padding: 5px 8px; -webkit-border-radius: 4px; -moz-border-radius:
4px; border-radius: 4px; cursor: pointer; margin-right: 5px; } .page-ellipsis {
padding: 0 8px; } .page-jump-to input { width: 45px; height: 26px; font-size:
13px; border: 1px solid #aaa; -webkit-border-radius: 4px; -moz-border-radius:
4px; border-radius: 4px; text-align: center; } .page-list .jump-go-btn {
font-size: 12px; } .page-select{ border: 1px solid #aaa; padding: 5px 8px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
cursor: pointer; margin-right: 5px; margin-left: 5px; } .page-list .page-item
.disabled{ pointer-events: none; background: #ddd; } .page-list .page-current {
cursor: default; color: #fff; background: #337ab7; border-color: #337ab7; }
</style>
Parent page
<page-helper @jumpPage="jumpPage" :page-number="pageNumber"
page-size-array="PageSizeArray"></page-helper>
Design sketch