分页生成工具

一个轻量级的分页页码生成工具，用于生成分页组件所需的页码数组。支持智能省略号处理，适用于各种分页场景。

功能特性

• 智能页码生成：根据当前页和总页数自动生成合理的页码数组
• 省略号处理：自动在适当位置插入省略号（-1）
• 灵活配置：可自定义两侧和中间显示的页码数量
• 边界处理：自动处理边界情况，确保返回值始终有效
• TypeScript 支持：完整的类型定义

安装

npm install @zhencai/generate-pages

基础用法

import { generatePages } from "@zhencai/generate-pages";

// 生成页码数组
const pages = generatePages(1, 10);
// 返回: [1, 2, 3, 4, 5, 6, 7, -1, 10]
// -1代表省略号

使用示例

示例 1：总页数较少，无需省略号

const pages = generatePages(3, 7);
// 返回: [1, 2, 3, 4, 5, 6, 7]

示例 2：当前页在中间，两侧都有省略号

const pages = generatePages(7, 20);
// 返回: [1, -1, 5, 6, 7, 8, 9, -1, 20]

示例 3：当前页靠前，只有右侧省略号

const pages = generatePages(2, 20);
// 返回: [1, 2, 3, 4, 5, 6, 7, -1, 20]

示例 4：当前页靠后，只有左侧省略号

const pages = generatePages(19, 20);
// 返回: [1, -1, 14, 15, 16, 17, 18, 19, 20]

示例 5：自定义显示数量

// 两侧显示 3 页(包含了省略号)，中间显示 7 页
const pages = generatePages(10, 50, 3, 7);
// 返回: [1, 2, -1, 7, 8, 9, 10, 11, 12, 13, -1, 49, 50]

API 文档

generatePages

生成分页页码数组。

函数签名

function generatePages(
  current: number,
  total: number,
  side?: number,
  mid?: number,
): number[];

参数

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | :-------- | :------- | :--- | :----- | :----------------------------------------------- | | current | number | 是 | - | 当前页码（从 1 开始） | | total | number | 是 | - | 总页数 | | side | number | 否 | 2 | 两侧显示的页码数量（最小值为 2，包含了省略号） | | mid | number | 否 | 5 | 中间显示的页码数量（最小值为 1，自动调整为奇数） |

返回值

返回一个数字数组，其中：

• 正数：表示页码
• -1：表示省略号

参数说明

side（两侧页码数量）

• 控制在省略号两侧显示的页码数量
• 例如：side=2 时，会在开头显示 [1, 2]，在结尾显示 [total-1, total]
• 最小值为 2，确保至少显示首页和末页

mid（中间页码数量）

• 控制围绕当前页显示的页码数量
• 例如：mid=5 时，会在当前页两侧各显示 2 页
• 自动调整为奇数，确保当前页始终居中
• 最小值为 1

实际应用示例

在 Vue 组件中使用

<template>
  <div class="pagination">
    <button
      v-for="(page, index) in pages"
      :key="index"
      :class="{
        'page-number': page !== -1,
        ellipsis: page === -1,
        active: page === currentPage,
      }"
      @click="page !== -1 && goToPage(page)">
      {{ page === -1 ? "..." : page }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { generatePages } from "@zhencai/generate-pages";

const currentPage = ref(1);
const totalPages = ref(50);

const pages = computed(() => {
  return generatePages(currentPage.value, totalPages.value, 2, 5);
});

function goToPage(page: number) {
  currentPage.value = page;
}
</script>

<style scoped>
.pagination {
  display: flex;
  gap: 8px;
}

.page-number {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.page-number:hover {
  background: #f0f0f0;
}

.page-number.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.ellipsis {
  padding: 8px 12px;
  color: #999;
}
</style>

算法说明

该工具采用以下策略生成页码：

1. 总页数较少：当 total <= side * 2 + mid 时，显示所有页码
2. 当前页靠前：只在右侧显示省略号
3. 当前页靠后：只在左侧显示省略号
4. 当前页居中：在两侧都显示省略号

这种设计确保了：

• 始终显示首页和末页
• 当前页周围显示足够多的页码
• 省略号位置合理，用户体验良好

注意事项

• current 参数会自动限制在 [1, total] 范围内
• total 参数最小值为 1
• side 参数最小值为 2（因为包含了省略号）
• mid 参数会自动调整为奇数，确保当前页居中
• 返回的数组中 -1 表示省略号，渲染时需要特殊处理

许可证

MIT