useOffsetPagination
响应式的偏移分页。
示例
使用方法
ts
import { useOffsetPagination } from '@vueuse/core'
function fetchData({ currentPage, currentPageSize }: { currentPage: number, currentPageSize: number }) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData
})
}
const {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
} = useOffsetPagination({
total: database.value.length,
page: 1,
pageSize: 10,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})js
import { useOffsetPagination } from '@vueuse/core'
function fetchData({ currentPage, currentPageSize }) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData
})
}
const {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
} = useOffsetPagination({
total: database.value.length,
page: 1,
pageSize: 10,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})组件使用
vue
<template>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage,
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
>
<div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
<div opacity="50">
总数：
</div>
<div>{{ database.length }}</div>
<div opacity="50">
页数：
</div>
<div>{{ pageCount }}</div>
<div opacity="50">
每页大小：
</div>
<div>{{ currentPageSize }}</div>
<div opacity="50">
当前页码：
</div>
<div>{{ currentPage }}</div>
<div opacity="50">
是否第一页：
</div>
<div>{{ isFirstPage }}</div>
<div opacity="50">
是否最后一页：
</div>
<div>{{ isLastPage }}</div>
</div>
<div>
<button :disabled="isFirstPage" @click="prev">
上一页
</button>
<button :disabled="isLastPage" @click="next">
下一页
</button>
</div>
</UseOffsetPagination>
</template>组件事件支持回调和事件监听器。
事件监听器：
vue
<template>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage,
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
@page-count-change="onPageCountChange"
>
<!-- 你的代码 -->
</UseOffsetPagination>
</template>或者使用 props 回调：
vue
<template>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage,
}"
:total="database.length"
:on-page-change="fetchData"
:on-page-size-change="fetchData"
:on-page-count-change="onPageCountChange"
>
<!-- 你的代码 -->
</UseOffsetPagination>
</template>类型声明
显示类型声明
ts
export interface UseOffsetPaginationOptions {
/**
* 总项目数。
*/
total?: MaybeRefOrGetter<number>
/**
* 每页显示的项目数。
* @default 10
*/
pageSize?: MaybeRefOrGetter<number>
/**
* 当前页码。
* @default 1
*/
page?: MaybeRef<number>
/**
* 当 `page` 改变时的回调函数。
*/
onPageChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
) => unknown
/**
* 当 `pageSize` 改变时的回调函数。
*/
onPageSizeChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
) => unknown
/**
* 当 `pageCount` 改变时的回调函数。
*/
onPageCountChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
) => unknown
}
export interface UseOffsetPaginationReturn {
currentPage: Ref<number>
currentPageSize: Ref<number>
pageCount: ComputedRef<number>
isFirstPage: ComputedRef<boolean>
isLastPage: ComputedRef<boolean>
prev: () => void
next: () => void
}
export type UseOffsetPaginationInfinityPageReturn = Omit<
UseOffsetPaginationReturn,
"isLastPage"
>
export declare function useOffsetPagination(
options: Omit<UseOffsetPaginationOptions, "total">,
): UseOffsetPaginationInfinityPageReturn
export declare function useOffsetPagination(
options: UseOffsetPaginationOptions,
): UseOffsetPaginationReturn源码
贡献者
Anthony Fu
一纸忘忧
Anthony Fu
IlyaL
IlyaL
Doctorwu
LJX
vaakian X
JD Solanki
Curt Grimes
webfansplz
三咲智子
Jelf