mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 15:39:15 +08:00
docs(Pagination): improve document
This commit is contained in:
parent
27822b2e5e
commit
18312ce9e9
@ -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 | `-` |
|
||||
|
@ -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` | 自定义下一页按钮文字 | `-` |
|
||||
|
@ -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',
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user