vue3+ts 分页hooks封装

import { reactive } from "vue";

export interface IPageInfo {
pageNum: number;
pageSize: number;
totalCount: number;
}

export interface IUsePageReturn {
pageInfo: IPageInfo;
resetPage: Function;
handleChangePageSize: Function;
handleChangeCurrent: Function;
}

/**
* 分页hook
* @return { IUsePageReturn } 分页信息&分页回调函数
*/
export const usePage = (): IUsePageReturn => {
const pageInfo: IPageInfo = reactive({
pageNum: 1,
pageSize: 10,
totalCount: 0
})
 
/**
* 切换分页显示条数
* @param { number } val 尺寸
*/
const handleChangePageSize = (val: number) => {
pageInfo.pageSize = val
}
 
/**
* 切换分页当前页数
* @param { number } val 页码
*/
const handleChangeCurrent = (val: number) => {
pageInfo.pageNum = val
}
 
// 重置当前页面位置
const resetPage = () => {
pageInfo.pageNum = 1
}
 
return {
pageInfo,
resetPage,
handleChangePageSize,
handleChangeCurrent
}
}