简单封装了一下

<template>
  <QueryPagination
    ref="queryPaginationRef"
    :total="totalCount"
    @change="handlePaginationChange" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { QueryPagination, type QueryPaginationExpose } from "h-business-ui";


const queryPaginationRef = ref<QueryPaginationExpose>();
const totalCount = ref(0);
const handlePaginationChange = (params : Record<string, unknown>) => {
  console.log(params);
};
</script>

属性名	类型	默认值	说明
total	number	0	总页数
layout	string	"total, sizes, prev, pager, next, jumper"	分页布局模式
pageSizes	number[]	"[10, 20, 30, 40]"	每页数量选项

事件名	参数	说明
change	(params: Record<string, unknown>) => void	分页，页数改变时调用的函数

方法名	类型	说明
resetPage	() => void	重置分页
resetCurrent	() => void	重置当前页
resetSize	() => void	重置每页数量
getPageParams	() => Record<string, unknown>	获取当前页参数

export interface Props {
  total: number;
  layout?: string;
  pageSizes?: number[];
}

export interface QueryPaginationExpose {
  resetPage: () => void;
  resetCurrent: (current: number) => void;
  resetSize: (size: number) => void;
  getPageParams: () => {
    current: number;
    size: number;
  };
}