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
<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> |