You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
51 lines
1.6 KiB
1 year ago
|
<script lang="ts" setup>
|
||
|
|
const props = defineProps<{
|
||
|
|
listTotal: number
|
||
|
|
listSize: number
|
||
|
|
}>()
|
||
|
|
const currentPage = ref(1)
|
||
|
|
const pages = computed(() => Math.ceil(props.listTotal / props.listSize))
|
||
|
|
const pageList = computed(() => {
|
||
|
|
const result = []
|
||
|
|
if (pages.value <= 5) {
|
||
|
|
for (let i = 1; i <= pages.value; i++) {
|
||
|
|
result.push(i)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (currentPage.value <= 2) {
|
||
|
|
for (let i = 1; i <= 5; i++) {
|
||
|
|
result.push(i)
|
||
|
|
}
|
||
|
|
} else if (currentPage.value >= pages.value - 1) {
|
||
|
|
for (let i = pages.value - 4; i <= pages.value; i++) {
|
||
|
|
result.push(i)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
|
||
|
|
result.push(i)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return result
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div flex="~ items-center">
|
||
|
|
<div class="cursor-pointer text-#666666 hover:text-#4080f9" @click="currentPage = 1">首页</div>
|
||
|
|
<div mx="10px" flex gap="5px">
|
||
|
|
<div v-if='currentPage > 3' w="30px" h="30px" text="center #666" leading="30px">...</div>
|
||
|
|
<div
|
||
|
|
v-for="item in pageList" :key="item"
|
||
|
|
w="30px" h="30px" text="center #666" leading="30px" cursor="pointer" class="hover:text-#4080f9"
|
||
|
|
@click="currentPage = item"
|
||
|
|
:class="currentPage === item ? '!text-#4080f9' : ''"
|
||
|
|
>
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
<div v-if='currentPage < pages - 2' w="30px" h="30px" text="center #666" leading="30px">...</div>
|
||
|
|
</div>
|
||
|
|
<div class="cursor-pointer text-#666666 hover:text-#4080f9" @click="currentPage = Math.floor(listTotal / listSize)">末页
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|