# TypeScript 原生分页器组件

**Repository Path**: brandon__leon/typescript_pager_component

## Basic Information

- **Project Name**: TypeScript 原生分页器组件
- **Description**: 【造轮子系列】使用TypeScript构建的分页器组件，实现可配置的分页系统。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript 原生分页器组件

#### 介绍
【造轮子系列】使用原生TypeScript构建的分页器组件，实现属性、参数可配置的分页系统；样式采用Stylus作为预处理器。
支持样式变量自定义；参数请求跳转等功能；视觉风格轻量、紧凑。

#### 软件架构

1.  TS目录：TypeScript代码、配置JSON文件以及类型定义文件。
2.  JS目录：TypeScript编译出的JavaScript代码
3.  style目录：Stylus定义的样式文件以及编译出的CSS文件。
4.  index.html简单的演示Demo.

#### 使用说明

**1.  特点概述：**
引入即可用，没有任何其他的三方依赖，基于原生语言编码，支持完整的TypeScript类型推导，

引入样式文件：
```html
<link href="./style/splitePager.css" type="text/css" rel="stylesheet">
```
引入脚本文件：
```html
<script src="./JS/splitPager.js"></script>
```
**2.  使用方法：**
使用轻巧简单，具有完备的TypeScript类型说明：
```javascript
new SplitPager({
    el:'#container',
    totalPage:101,
    showPage:10,
    pageQuery:"page"
});
```

**3.  API说明:**

|属性名称|数据类型|作用说明|默认值|
|:---:|:---:|:---:|:---:|
|el(必选)|String|用于抓取的容器选择器。|""|
|totalPage|Number|分页器的总页数。|10|
|showlPage|Number|分页器展示部分的页数。|5|
|currentPage|Number|分页器初始化时选中的页数。|1|
|pageQuery|String|点击分页器时地址栏跳转的格式，splitPager会自动为跳转的地址添加上当前的页码数。|""|

**4. 暴露属性:**

|属性名称|数据类型|作用说明|
|:---:|:---:|:---:|
|el|Element|分页器所处的父容器。|
|options|ISplitPager|分页器当前的设置参数。|
|currentPage|Number|分页器当前选中的页数。|
|pageScope|Array<number>|分页器当前展示的页码范围。|

**5. Stylus样式配置说明:**

*可配置部分：*
|样式变量|作用说明|
|:---:|:---:|
|$pager-border-color|分页器边框颜色。|
|$pager-text-color|分页器文本颜色。|
|$pager-font-size|分页器字体大小。|
|$pager-hover-color|分页器激活时切换的颜色。|

*若需要完全使用自己配置的类名，可参考如下：*
|样式名称|作用说明|
|:---:|:---:|
|pager-base|所有的分页器按钮都会生效的基础样式。|
|pager-base:hover|所有分页器在鼠标移入移出时切换的样式属性。|
|pager-banned|分页器被禁用时使用的样式，默认带有!important标注。|
|pager-active|分页器按钮被选中时采用的样式。|

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 码云特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)