88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<template>
|
|
<view class="pagination">
|
|
<text :disabled="page <= 1" @tap.stop="gotoPage(page - 1)"><</text>
|
|
<text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @tap.stop="gotoPage(item)">{{ item }}</text>
|
|
<text :disabled="page >= totalPages" @tap.stop="gotoPage(page + 1)">></text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Pagination',
|
|
props: {
|
|
total: { // 总条目数
|
|
type: Number,
|
|
required: true
|
|
},
|
|
pageSize: { // 每页显示的条目数
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
currentPage: { // 当前页码
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
computed: {
|
|
totalPages() { // 总页数
|
|
return Math.ceil(this.total / this.pageSize)
|
|
},
|
|
page() { // 当前页码，限定在 1 和总页数之间
|
|
return Math.max(1, Math.min(this.currentPage, this.totalPages))
|
|
},
|
|
pages() { // 可点击的页码数组，最多显示 5 个页码
|
|
const arr = []
|
|
let start = Math.max(this.page - 2, 1)
|
|
let end = Math.min(start + 4, this.totalPages)
|
|
if (end - start < 4) {
|
|
end = Math.min(start + 4, this.totalPages)
|
|
start = Math.max(end - 4, 1)
|
|
}
|
|
for (let i = start; i <= end; i++) {
|
|
arr.push(i)
|
|
}
|
|
if (end < this.totalPages) {
|
|
arr.push('...', this.totalPages)
|
|
}
|
|
return arr
|
|
}
|
|
},
|
|
methods: {
|
|
getItemKey(item) { // 获取项的 key
|
|
return typeof item === 'number' ? item.toString() : item
|
|
},
|
|
gotoPage(page) { // 跳转到指定页码
|
|
if (page > 0 && page <= this.totalPages) {
|
|
this.$emit('page-change', page)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '@/common/style/mixin.styl';
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
text {
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
margin-right: 10px;
|
|
_font(13px, 26px, #053978,,)
|
|
}
|
|
|
|
text.active {
|
|
background-color: #053978;
|
|
color: #fff;
|
|
}
|
|
|
|
text.ellipsis {
|
|
cursor: default;
|
|
}
|
|
</style> |