docs(Pagination): improve document

This commit is contained in:
chenjiahan 2020-10-01 17:16:25 +08:00
parent 27822b2e5e
commit 18312ce9e9
3 changed files with 15 additions and 7 deletions

View File

@ -44,7 +44,7 @@ export default {
/>
```
### Custom Render
### Custom Button
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@ -84,6 +84,6 @@ export default {
| Name | Description | SlotProps |
| --- | --- | --- |
| page `v2.10.9` | Custom pagination item | `{ number: number, text: string, active: boolean }` |
| page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
| prev-text `v2.10.9` | Custom prev text | `-` |
| next-text `v2.10.9` | Custom next text | `-` |

View File

@ -13,6 +13,8 @@ Vue.use(Pagination);
### 基础用法
通过 `v-model` 来绑定当前页码。
```html
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
```
@ -29,12 +31,16 @@ export default {
### 简单模式
`mode` 设置为 `simple` 来切换到简单模式,此时分页器不会展示具体的页码按钮。
```html
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
```
### 显示省略号
设置 `force-ellipses` 后会展示省略号按钮,点击后可以快速跳转。
```html
<van-pagination
v-model="currentPage"
@ -44,7 +50,9 @@ export default {
/>
```
### 自定义渲染
### 自定义按钮
通过 `prev-text``next-text` 等插槽来自定义分页按钮的内容。
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@ -84,6 +92,6 @@ export default {
| 名称 | 描述 | SlotProps |
| --- | --- | --- |
| page `v2.10.9` | 自定义页码 | `{ number: number, text: string, active: boolean }` |
| page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
| prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
| next-text `v2.10.9` | 自定义下一页按钮文字 | `-` |

View File

@ -23,8 +23,8 @@
<demo-block :title="t('title3')">
<van-pagination
force-ellipses
v-model="currentPage3"
force-ellipses
:total-items="125"
:show-page-size="3"
:prev-text="t('prevText')"
@ -56,14 +56,14 @@ export default {
'zh-CN': {
title2: '简单模式',
title3: '显示省略号',
title4: '自定义渲染',
title4: '自定义按钮',
prevText: '上一页',
nextText: '下一页',
},
'en-US': {
title2: 'Simple Mode',
title3: 'Show ellipses',
title4: 'Custom Render',
title4: 'Custom Button',
prevText: 'Prev',
nextText: 'Next',
},