# web Components分页器组件

**Repository Path**: chen1404276788/web-Components-pagination

## Basic Information

- **Project Name**: web Components分页器组件
- **Description**: 使用web Components api开发一个分页器组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-28
- **Last Updated**: 2023-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web Components分页器组件

#### 介绍
使用web Components api开发一个分页器组件

## 属性
| 参数 | 说明 | 类型 | 默认值 |
| :--: | :--: | :--: | :--: |
| total | 总数 | Number | 0 |
| size | 每页显示条数 | Number | 10 |
| page | 当前页码 | Number | 1 |
| isPageSizeSelector | 分页选择器是否显示 | Boolean | false |
| pageSizeSelector | 分页选择器 | Array | [10,20,30,40,50,100] |
| buttonSize | 按钮数量 | Number | 5 |

## 事件
| 事件名 | 说明 |
| :--: | :--: | 
| sl-change | 页码改变时触发 | 
| sl-pageChange | 分页选择器改变时触发 | 

## 示例
```html
<my-pagination 
    total="30" 
    page="1" 
    size="10" 
    isPageSizeSelector="true" 
    pageSizeSelector="[10,20,30,40,50,100]"
    id="pagination1"
    >
</my-pagination>
```
```javascript
const myPagination = document.querySelector('#pagination1');
myPagination.addEventListener('sl-change', (event) => {
// 在这里处理页面切换事件
    console.log("event",event)
    console.log(event.detail)
});
myPagination.addEventListener('sl-pageChange', (event) => {
// 在这里处理页面切换事件
    console.log("event",event)
    console.log(event.detail)
});
```