add pagination demo
wangxueliang
parent
fbf7eaa13e
commit
06541dc896
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
<cn>
|
||||
#### 基本
|
||||
基础分页。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
Basic pagination.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination v-model="current" :total="50" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 2,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
<cn>
|
||||
#### 改变
|
||||
改变每页显示条目数。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Changer
|
||||
Change `pageSize`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination showSizeChanger @showSizeChange="onShowSizeChange" :defaultCurrent="3" :total="500" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onShowSizeChange(current, pageSize) {
|
||||
console.log(current, pageSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-select {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<cn>
|
||||
#### 受控
|
||||
受控制的页码。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Controlled
|
||||
Controlled page number.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination @change="onChange" :current="current" :total="50" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(current) {
|
||||
this.current = current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
<cn>
|
||||
#### 自定义下拉选项
|
||||
自定义下拉选项，例如添加全部选项
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom dropdown options
|
||||
Customize dropdown options such as adding all options
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination
|
||||
:pageSizeOptions="pageSizeOptions"
|
||||
:total="total"
|
||||
showSizeChanger
|
||||
:pageSize="pageSize"
|
||||
v-model="current"
|
||||
@showSizeChange="onShowSizeChange"
|
||||
>
|
||||
<template slot='buildOptionText' slot-scope='props'>
|
||||
<span v-if="props.value!=='50'">{{props.value}}条/页</span>
|
||||
<span v-if="props.value==='50'">全部</span>
|
||||
</template>
|
||||
</a-pagination>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageSizeOptions: ['10', '20', '30', '40', '50'],
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 50,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onShowSizeChange(current, pageSize) {
|
||||
this.pageSize = pageSize
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-select {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -1,88 +1,71 @@
|
|||
<template>
|
||||
<div>
|
||||
基本
|
||||
<Pagination :current="1" :total="50" />
|
||||
<br>
|
||||
更多
|
||||
<Pagination :current="6" :total="500" />
|
||||
<br>
|
||||
简洁
|
||||
<div style="margin-bottom:10px">
|
||||
<pagination :simple="simple" :current="5" :total="total"></pagination>
|
||||
</div>
|
||||
<br>
|
||||
改值操作
|
||||
<div style="margin-bottom:10px">
|
||||
<pagination :current="current" :total="total" @change="onchange"></pagination>
|
||||
<vc-button @click="changeValue">改值</vc-button>
|
||||
</div>
|
||||
<br>
|
||||
双向绑定
|
||||
<div>
|
||||
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
|
||||
<vc-button @click="getValue">当前值</vc-button>
|
||||
</div>
|
||||
<br>
|
||||
迷你
|
||||
<Pagination :current="1" :total="50" size="small"/>
|
||||
<Pagination :current="1" :total="50" :showTotal="showTotal" size="small" showSizeChanger showQuickJumper/>
|
||||
<br>
|
||||
总数
|
||||
<Pagination :current="1" :total="50" :showTotal="showTotal"/>
|
||||
<Pagination :current="1" :total="50" :showTotal="showTotal1"/>
|
||||
<br>
|
||||
跳转
|
||||
<Pagination v-model="current" :total="50" :showQuickJumper="showQuickJumper" showSizeChanger>
|
||||
<template slot='buildOptionText' slot-scope='props'>
|
||||
<span>{{props.value}}条/页</span>
|
||||
</template>
|
||||
</Pagination>
|
||||
<vc-button @click="getValue">当前值</vc-button>
|
||||
<br>
|
||||
上一步下一步
|
||||
<Pagination :total="500" :itemRender="itemRender" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import '../style'
|
||||
import { Pagination, Button } from 'antd/index'
|
||||
import Basic from './basic'
|
||||
import Changer from './changer'
|
||||
import Controlled from './controlled'
|
||||
import CustomChanger from './custom-changer'
|
||||
import ItemRender from './itemRender'
|
||||
import Jump from './jump'
|
||||
import Mini from './mini'
|
||||
import More from './more'
|
||||
import Simple from './simple'
|
||||
import Total from './total'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Pagination
|
||||
|
||||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当加载/渲染所有数据将花费很多时间时；
|
||||
- 可切换页码浏览数据。
|
||||
|
||||
## 代码演示`,
|
||||
|
||||
us: `# Pagination
|
||||
|
||||
A long list can be divided into several pages by 'Pagination', and only one page will be loaded at a time.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When it will take a long time to load/render all items.
|
||||
- If you want to browse the data by navigating through pages.`,
|
||||
}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
simple: true,
|
||||
current: 1,
|
||||
total: 483,
|
||||
showQuickJumper: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeValue () {
|
||||
this.current = 4
|
||||
},
|
||||
getValue () {
|
||||
console.log(this.current)
|
||||
},
|
||||
showTotal (total) {
|
||||
return `Total ${total} items`
|
||||
},
|
||||
showTotal1 (total, range) {
|
||||
return `${range[0]}-${range[1]} of ${total} items`
|
||||
},
|
||||
onchange (page) {
|
||||
console.log(page)
|
||||
},
|
||||
itemRender (current, type, originalElement) {
|
||||
if (type === 'prev') {
|
||||
return <a>Previous</a>
|
||||
} else if (type === 'next') {
|
||||
return <a>Next</a>
|
||||
}
|
||||
return originalElement
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Pagination,
|
||||
vcButton: Button,
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Basic />
|
||||
<br/>
|
||||
<More />
|
||||
<br/>
|
||||
<Changer />
|
||||
<br/>
|
||||
<CustomChanger />
|
||||
<br/>
|
||||
<Jump />
|
||||
<br/>
|
||||
<Mini />
|
||||
<br/>
|
||||
<Simple />
|
||||
<br/>
|
||||
<Controlled />
|
||||
<br/>
|
||||
<Total />
|
||||
<br/>
|
||||
<ItemRender />
|
||||
<br/>
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<cn>
|
||||
#### 上一步和下一步
|
||||
修改上一步和下一步为文字链接。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Prev and next
|
||||
Use text link for prev and next button.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination :total="500" :itemRender="itemRender" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
itemRender(current, type, originalElement) {
|
||||
if (type === 'prev') {
|
||||
return <a>Previous</a>;
|
||||
} else if (type === 'next') {
|
||||
return <a>Next</a>;
|
||||
}
|
||||
return originalElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<cn>
|
||||
#### 跳转
|
||||
快速跳转到某一页。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Jumper
|
||||
Jump to a page directly.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange(pageNumber) {
|
||||
console.log('Page: ', pageNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
<cn>
|
||||
#### 迷你
|
||||
迷你版本。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Mini size
|
||||
Mini size pagination.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-pagination size="small" :total="50" />
|
||||
<a-pagination size="small" :total="50" showSizeChanger showQuickJumper />
|
||||
<a-pagination size="small" :total="50" :showTotal="total => `Total ${total} items`" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ant-select {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.code-box-demo .ant-pagination:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<cn>
|
||||
#### 更多
|
||||
更多分页。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### more
|
||||
Mode pages.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination :defaultCurrent="6" :total="500" />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<cn>
|
||||
#### 简洁
|
||||
简单的翻页。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Simple mode
|
||||
Simple mode.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-pagination simple :defaultCurrent="2" :total="50" />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
<cn>
|
||||
#### 总数
|
||||
通过设置 `showTotal` 展示总共有多少数据。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Total number
|
||||
You can show the total number of data by setting `showTotal`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-pagination
|
||||
:total="85"
|
||||
:showTotal="total => `Total ${total} items`"
|
||||
:pageSize="20"
|
||||
:defaultCurrent="1"
|
||||
/>
|
||||
<br />
|
||||
<a-pagination
|
||||
:total="85"
|
||||
:showTotal="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
|
||||
:pageSize="20"
|
||||
:defaultCurrent="1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
## API
|
||||
|
||||
```html
|
||||
<Pagination @change={onChange} :total="50" />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| current | current page number | number | - |
|
||||
| defaultCurrent | default initial page number | number | 1 |
|
||||
| defaultPageSize | default number of data items per page | number | 10 |
|
||||
| hideOnSinglePage | Whether to hide pager on single page | boolean | false |
|
||||
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
|
||||
| pageSize | number of data items per page | number | - |
|
||||
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
|
||||
| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
|
||||
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
|
||||
| showTotal | to display the total number and range | Function(total, range) | - |
|
||||
| simple | whether to use simple mode | boolean | - |
|
||||
| size | specify the size of `Pagination`, can be set to `small` | string | "" |
|
||||
| total | total number of data items | number | 0 |
|
||||
|
||||
### events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| change | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
|
||||
| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
## API
|
||||
|
||||
```html
|
||||
<Pagination @change={onChange} :total="50" />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| current(v-model) | 当前页数 | number | - |
|
||||
| defaultCurrent | 默认的当前页数 | number | 1 |
|
||||
| defaultPageSize | 默认的每页条数 | number | 10 |
|
||||
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
|
||||
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
|
||||
| pageSize | 每页条数 | number | - |
|
||||
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
|
||||
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
|
||||
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
|
||||
| simple | 当添加该属性时，显示为简单分页 | boolean | - |
|
||||
| size | 当为「small」时，是小尺寸分页 | string | "" |
|
||||
| total | 数据总数 | number | 0 |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| change | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
|
||||
| showSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
|
||||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/steps/demo/${d}`),
|
||||
component: import(`../components/pagination/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue