blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +08:00
Code Issues Projects Releases Wiki Activity

docs(Pagination): improve document

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pagination/README.md
View File

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

12
src/pagination/README.zh-CN.md
View File

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

6
src/pagination/demo/index.vue
View File

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