# pagination (w-pagination)

- **Import**: `WPagination` from `win-design-next`
- **Tag**: `<w-pagination>`
- **说明**: Pagination 分页
- **分类**: navigation
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/pagination.md`

## API

## API

### 属性

| 属性名                              | 说明                                                                                                                           | 类型                                                                                        | 默认值                               |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------ |
| size                                | 分页大小                                                                                                                       | ^[enum]`'large' \| 'default' \| 'small'`                                                    | 'default'                            |
| background                          | 是否为分页按钮添加背景色                                                                                                       | ^[boolean]                                                                                  | true                                 |
| page-size / v-model:page-size       | 每页显示条目个数                                                                                                               | ^[number]                                                                                   | —                                    |
| default-page-size                   | 每页默认的条目个数，不设置时默认为 10                                                                                          | ^[number]                                                                                   | —                                    |
| total                               | 总条目数                                                                                                                       | ^[number]                                                                                   | —                                    |
| page-count                          | 总页数， `total` 和 `page-count` 设置任意一个就可以达到显示页码的功能；如果要支持 `page-sizes` 的更改，则需要使用 `total` 属性 | ^[number]                                                                                   | —                                    |
| pager-count                         | 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠                                                                  | ^[number]`5 \| 7 \| 9 \| 11 \| 13 \| 15 \| 17 \| 19 \| 21`                                  | 7                                    |
| current-page / v-model:current-page | 当前页数                                                                                                                       | ^[number]                                                                                   | —                                    |
| default-current-page                | 当前页数的默认初始值，不设置时默认为 1                                                                                         | ^[number]                                                                                   | —                                    |
| layout                              | 组件布局，子组件名用逗号分隔                                                                                                   | ^[string]`string (consists of sizes, prev, pager, next, fraction, jumper, ->, total, slot)` | prev, pager, next, jumper, ->, total |
| page-sizes                          | 每页显示个数选择器的选项设置                                                                                                   | ^[object]`number[]`                                                                         | [10, 20, 30, 40, 50, 100]            |
| append-size-to                      | 下拉框挂载到哪个 DOM 元素                                                                                                      | ^[string]                                                                                   | —                                    |
| popper-class                        | 每页显示个数选择器的下拉框类名                                                                                                 | ^[string]                                                                                   | ''                                   |
| prev-text                           | 替代图标显示的上一页文字                                                                                                       | ^[string]                                                                                   | ''                                   |
| prev-icon                           | 上一页的图标， 比 `prev-text` 优先级更高                                                                                       | ^[string] / ^[Component]                                                                    | ArrowLeft                            |
| next-text                           | 替代图标显示的下一页文字                                                                                                       | ^[string]                                                                                   | ''                                   |
| next-icon                           | 下一页的图标， 比 `next-text` 优先级更低                                                                                       | ^[string] / ^[Component]                                                                    | ArrowRight                           |
| disabled                            | 是否禁用分页                                                                                                                   | ^[boolean]                                                                                  | false                                |
| teleported                          | 是否将下拉菜单 teleport 至 body                                                                                                | ^[boolean]                                                                                  | true                                 |
| hide-on-single-page                 | 只有一页时是否隐藏                                                                                                             | ^[boolean]                                                                                  | false                                |
| small ^(deprecated)                 | 是否使用小型分页样式                                                                                                           | ^[boolean]                                                                                  | false                                |

### 事件

| 名称           | 说明                                     | 类型                                                         |
| -------------- | ---------------------------------------- | ------------------------------------------------------------ |
| size-change    | `page-size` 改变时触发                   | ^[Function]`(value: number) => void`                         |
| current-change | `current-page` 改变时触发                | ^[Function]`(value: number) => void`                         |
| change         | `current-page` 或 `page-size` 更改时触发 | ^[Function]`(currentPage: number, pageSize: number) => void` |
| prev-click     | 用户点击上一页按钮改变当前页时触发       | ^[Function]`(value: number) => void`                         |
| next-click     | 用户点击下一页按钮改变当前页时触发       | ^[Function]`(value: number) => void`                         |

### 插槽

| 名称    | 说明                                               |
| ------- | -------------------------------------------------- |
| default | 自定义内容 设置文案，需要在 `layout` 中列出 `slot` |
