b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
4.0 KiB
4.0 KiB
category
| category |
|---|
| Utilities |
useOffsetPagination
Reactive offset pagination.
Usage
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,
})
Component Usage
<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">
total:
</div>
<div>{{ database.length }}</div>
<div opacity="50">
pageCount:
</div>
<div>{{ pageCount }}</div>
<div opacity="50">
currentPageSize:
</div>
<div>{{ currentPageSize }}</div>
<div opacity="50">
currentPage:
</div>
<div>{{ currentPage }}</div>
<div opacity="50">
isFirstPage:
</div>
<div>{{ isFirstPage }}</div>
<div opacity="50">
isLastPage:
</div>
<div>{{ isLastPage }}</div>
</div>
<div>
<button :disabled="isFirstPage" @click="prev">
prev
</button>
<button :disabled="isLastPage" @click="next">
next
</button>
</div>
</UseOffsetPagination>
</template>
Component event supported props event callback and event listener.
event listener:
<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"
>
<!-- your code -->
</UseOffsetPagination>
</template>
or props event callback:
<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"
>
<!-- your code -->
</UseOffsetPagination>
</template>
Type Declarations
export interface UseOffsetPaginationOptions {
/**
* Total number of items.
*/
total?: MaybeRefOrGetter<number>
/**
* The number of items to display per page.
* @default 10
*/
pageSize?: MaybeRefOrGetter<number>
/**
* The current page number.
* @default 1
*/
page?: MaybeRef<number>
/**
* Callback when the `page` change.
*/
onPageChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
) => unknown
/**
* Callback when the `pageSize` change.
*/
onPageSizeChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
) => unknown
/**
* Callback when the `pageCount` change.
*/
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