91 lines
2.2 KiB
Plaintext
91 lines
2.2 KiB
Plaintext
<script setup lang="ts">
|
|
const props = defineProps({
|
|
current: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
visiblePageCount: {
|
|
type: Number,
|
|
default: 5,
|
|
},
|
|
})
|
|
const emit = defineEmits(['update:current', 'update:total'])
|
|
|
|
const { current: currentPage, total: totalItems } = useVModels(props, emit)
|
|
const visiblePageCount = computed(() => props.visiblePageCount)
|
|
|
|
const totalPages = computed(() => Math.ceil(unref(totalItems) / props.size))
|
|
|
|
const visiblePages = computed(() => {
|
|
// 前后5个
|
|
// const start = Math.max(1, unref(currentPage) - unref(visiblePageCount))
|
|
// const end = Math.min(unref(totalPages), unref(currentPage) + unref(visiblePageCount))
|
|
// console.log(start, end)
|
|
|
|
// 总数5个
|
|
let start = Math.max(1, unref(currentPage) - Math.floor(unref(visiblePageCount) / 2))
|
|
const end = Math.min(start + unref(visiblePageCount) - 1, unref(totalPages))
|
|
if (end - start + 1 < unref(visiblePageCount)) {
|
|
start = Math.max(1, end - unref(visiblePageCount) + 1)
|
|
}
|
|
|
|
return Array.from({ length: end - start + 1 }, (_, index) => start + index)
|
|
})
|
|
|
|
function previousPage() {
|
|
currentPage.value--
|
|
}
|
|
function nextPage() {
|
|
if (unref(currentPage) < unref(totalPages)) {
|
|
currentPage.value++
|
|
}
|
|
}
|
|
function goToPage(page: number) {
|
|
if (page >= 1 && page <= unref(totalPages)) {
|
|
currentPage.value = page
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="inline-flex gap-12px items-center items">
|
|
<template v-if="total <= 0">
|
|
<span class="item active"> 1 </span>
|
|
</template>
|
|
<template v-else>
|
|
<span @click="previousPage" v-if="currentPage != 1" class="mr16px">上一页</span>
|
|
<span v-for="page in visiblePages" :key="page" @click="goToPage(page)" class="item" :class="{ active: page === currentPage }">
|
|
{{ page }}
|
|
</span>
|
|
<span @click="nextPage" v-if="currentPage != totalPages" class="ml16px">下一页</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.items {
|
|
color: #003ab5;
|
|
& > * {
|
|
cursor: pointer;
|
|
}
|
|
.item {
|
|
background-color: #f7f7f7;
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
|
|
&.active {
|
|
background-color: #003ab5;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|