Simple Pager

一个用 TypeScript 编写的、功能强大、高度可定制且与框架无关的分页组件。支持原生 JavaScript、Vue 3 和 React。

查看在线演示

特性

• 🎨 高度可定制: 丰富的主题、尺寸、布局和对齐方式选项。
• 🚀 现代技术栈: 使用 TypeScript 和 Vite 构建，提供现代化的开发体验。
• 🌳 框架无关: 可用于原生 JS、Vue 3 或 React。
• 📱 响应式: 在所有设备尺寸上都能无缝工作。
• 🎯 两种模式: 支持传统的页码和“加载更多”两种功能。
• 🛡️ 类型安全: 完整的 TypeScript 支持和生成的类型声明文件。
• ✨ 炫酷动画: 包含平滑的过渡和悬停效果。

安装

npm install simple-pager

使用

原生 JavaScript (ES Modules)

import Pagination from 'simple-pager';
import 'simple-pager/style.css';

const pager = new Pagination({
  container: '#pager-container',
  pagination: { total: 100, page: 1, pageSize: 10 },
  callback: (page) => {
    console.log('跳转到页面:', page);
  },
});

Vue 3

<template>
  <Pagination
    :total="total"
    :page="page"
    :page-size="pageSize"
    @change="handlePageChange"
  />
</template>

<script setup>
import { ref } from 'vue';
import { Pagination } from 'simple-pager/vue';
import 'simple-pager/style.css';

const total = ref(100);
const page = ref(1);
const pageSize = ref(10);

function handlePageChange(p) {
  page.value = p;
  console.log('跳转到页面:', p);
}
</script>

React

import React, { useState } from 'react';
import { Pagination } from 'simple-pager/react';
import 'simple-pager/style.css';

function App() {
  const [page, setPage] = useState(1);

  const handlePageChange = (p) => {
    setPage(p);
    console.log('跳转到页面:', p);
  };

  return (
    <Pagination
      total={100}
      page={page}
      pageSize={10}
      onChange={handlePageChange}
    />
  );
}

API 参考

PaginationOptions

| 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | container | string \| HTMLElement | '#pagination' | 容器的选择器或 DOM 元素。 | | pagination | PaginationData | {total: 0, page: 1, pageSize: 10, count: 0} | 分页状态。 | | theme | 'cyber' \| 'light' \| 'dark' | 'cyber' | 组件主题。 | | size | 'sm' \| 'md' \| 'lg' | 'md' | 组件尺寸。 | | pageType | 'page' \| 'more' | 'page' | 'page' 为页码模式, 'more' 为加载更多模式。 | | layout | string | 'normal' | 分页控件的布局。 | | align | 'start' \| 'end' \| 'center' \| 'between' \| 'full' | 'center' | 组件的对齐方式。 | | buttonRadius | number | 8 | 按钮的圆角大小。 | | callback | (page: number) => void | () => {} | 页面变化时的回调函数。 |

Vue 和 React Props

Vue 和 React 的封装组件接收的 props 与 PaginationOptions 高度一致。对于事件处理，Vue 使用 @change，React 使用 onChange。

开发

# 克隆仓库
git clone https://github.com/kentpan/simple-pager
cd simple-pager

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

许可证

MIT