Merge branch 'dev' into next

This commit is contained in:
chenjiahan
2020-10-02 08:50:37 +08:00
57 changed files with 500 additions and 270 deletions
+5 -5
View File
@@ -45,7 +45,7 @@ export default {
/>
```
### Custom Render
### Custom Button
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@@ -83,8 +83,8 @@ export default {
### Slots
| Name | Description | Default |
| Name | Description | SlotProps |
| --- | --- | --- |
| prev-text | custom prev slot | `-` |
| next-text | custom next slot | `-` |
| page | pagination item slot | `{ 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 -5
View File
@@ -14,6 +14,8 @@ app.use(Pagination);
### 基础用法
通过 `v-model` 来绑定当前页码。
```html
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
```
@@ -30,12 +32,16 @@ export default {
### 简单模式
`mode` 设置为 `simple` 来切换到简单模式,此时分页器不会展示具体的页码按钮。
```html
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
```
### 显示省略号
设置 `force-ellipses` 后会展示省略号按钮,点击后可以快速跳转。
```html
<van-pagination
v-model="currentPage"
@@ -45,7 +51,9 @@ export default {
/>
```
### 自定义渲染
### 自定义按钮
通过 `prev-text``next-text` 等插槽来自定义分页按钮的内容。
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@@ -83,8 +91,8 @@ export default {
### Slots
| 名称 | 描述 | 默认值 |
| 名称 | 描述 | SlotProps |
| --- | --- | --- |
| prev-text | 自定义上一页插槽 | `-` |
| next-text | 自定义一页插槽 | `-` |
| page | 自定义页码插槽 | `{ 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` | 自定义下一页按钮文字 | `-` |
+2 -2
View File
@@ -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',
},