mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 20:04:09 +00:00
[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
79
src/pagination/demo/index.vue
Normal file
79
src/pagination/demo/index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-pagination
|
||||
v-model="currentPage1"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
:prev-text="$t('prevText')"
|
||||
:next-text="$t('nextText')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-pagination
|
||||
v-model="currentPage2"
|
||||
:page-count="12"
|
||||
:prev-text="$t('prevText')"
|
||||
:next-text="$t('nextText')"
|
||||
mode="simple"
|
||||
size="small"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-pagination
|
||||
force-ellipses
|
||||
v-model="currentPage3"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
:prev-text="$t('prevText')"
|
||||
:next-text="$t('nextText')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '简单模式',
|
||||
title3: '',
|
||||
prevText: '上一页',
|
||||
nextText: '下一页'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Simple Mode',
|
||||
title3: 'Show ellipses',
|
||||
prevText: 'Prev',
|
||||
nextText: 'Next'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 1,
|
||||
currentPage2: 1,
|
||||
currentPage3: 1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-pagination {
|
||||
.van-pagination {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
74
src/pagination/en-US.md
Normal file
74
src/pagination/en-US.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# Pagination
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Pagination } from 'vant';
|
||||
|
||||
Vue.use(Pagination);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Simple mode
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:page-count="12"
|
||||
mode="simple"
|
||||
/>
|
||||
```
|
||||
|
||||
### Show ellipses
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
force-ellipses
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Current page number | `Number` | - |
|
||||
| mode | Mode, can be set to `simple` `multi` | `String` | `multi` |
|
||||
| total-items | Total items | `Number` | `0` |
|
||||
| items-per-page | Item number per page | `Number` | `10` |
|
||||
| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | `Number` | `-` |
|
||||
| prev-text | Previous text | `String` | `Previous` |
|
||||
| next-text | Next text | `String` | `Next` |
|
||||
| show-page-size | Count of page size to show | `Number` | `5` |
|
||||
| force-ellipses | Whether to show ellipses | `Boolean` | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered on page change | - |
|
||||
144
src/pagination/index.js
Normal file
144
src/pagination/index.js
Normal file
@@ -0,0 +1,144 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('pagination');
|
||||
|
||||
function makePage(number, text, active) {
|
||||
return { number, text, active };
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
value: Number,
|
||||
prevText: String,
|
||||
nextText: String,
|
||||
pageCount: Number,
|
||||
totalItems: Number,
|
||||
forceEllipses: Boolean,
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'multi'
|
||||
},
|
||||
itemsPerPage: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
showPageSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
count() {
|
||||
const count = this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage);
|
||||
return Math.max(1, count);
|
||||
},
|
||||
|
||||
pages() {
|
||||
const pages = [];
|
||||
const pageCount = this.count;
|
||||
|
||||
if (this.mode !== 'multi') {
|
||||
return pages;
|
||||
}
|
||||
|
||||
// Default page limits
|
||||
let startPage = 1;
|
||||
let endPage = pageCount;
|
||||
const isMaxSized = this.showPageSize !== undefined && this.showPageSize < pageCount;
|
||||
|
||||
// recompute if showPageSize
|
||||
if (isMaxSized) {
|
||||
// Current page is displayed in the middle of the visible ones
|
||||
startPage = Math.max(this.value - Math.floor(this.showPageSize / 2), 1);
|
||||
endPage = startPage + this.showPageSize - 1;
|
||||
|
||||
// Adjust if limit is exceeded
|
||||
if (endPage > pageCount) {
|
||||
endPage = pageCount;
|
||||
startPage = endPage - this.showPageSize + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Add page number links
|
||||
for (let number = startPage; number <= endPage; number++) {
|
||||
const page = makePage(number, number, number === this.value);
|
||||
pages.push(page);
|
||||
}
|
||||
|
||||
// Add links to move between page sets
|
||||
if (isMaxSized && this.showPageSize > 0 && this.forceEllipses) {
|
||||
if (startPage > 1) {
|
||||
const previousPageSet = makePage(startPage - 1, '...', false);
|
||||
pages.unshift(previousPageSet);
|
||||
}
|
||||
|
||||
if (endPage < pageCount) {
|
||||
const nextPageSet = makePage(endPage + 1, '...', false);
|
||||
pages.push(nextPageSet);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler(page) {
|
||||
this.select(page || this.value);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
select(page, emitChange) {
|
||||
page = Math.min(this.count, Math.max(1, page));
|
||||
if (this.value !== page) {
|
||||
this.$emit('input', page);
|
||||
|
||||
if (emitChange) {
|
||||
this.$emit('change', page);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { value } = this;
|
||||
const simple = this.mode !== 'multi';
|
||||
|
||||
const onSelect = value => () => {
|
||||
this.select(value, true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ul class={bem({ simple })}>
|
||||
<li
|
||||
class={[bem('item', { disabled: value === 1 }), bem('prev'), 'van-hairline']}
|
||||
onClick={onSelect(value - 1)}
|
||||
>
|
||||
{this.prevText || t('prev')}
|
||||
</li>
|
||||
{this.pages.map(page => (
|
||||
<li
|
||||
class={[bem('item', { active: page.active }), bem('page'), 'van-hairline']}
|
||||
onClick={onSelect(page.number)}
|
||||
>
|
||||
{page.text}
|
||||
</li>
|
||||
))}
|
||||
{simple && (
|
||||
<li class={bem('page-desc')}>{this.slots('pageDesc') || `${value}/${this.count}`}</li>
|
||||
)}
|
||||
<li
|
||||
class={[bem('item', { disabled: value === this.count }), bem('next'), 'van-hairline']}
|
||||
onClick={onSelect(value + 1)}
|
||||
>
|
||||
{this.nextText || t('next')}
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
67
src/pagination/index.less
Normal file
67
src/pagination/index.less
Normal file
@@ -0,0 +1,67 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-pagination {
|
||||
display: flex;
|
||||
font-size: @pagination-font-size;
|
||||
line-height: @pagination-height;
|
||||
text-align: center;
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
min-width: @pagination-item-width;
|
||||
height: @pagination-height;
|
||||
color: @pagination-item-default-color;
|
||||
background-color: @pagination-background-color;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
color: @white;
|
||||
background-color: @pagination-item-default-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: 1px 0 1px 1px;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&--disabled:active {
|
||||
color: @pagination-item-disabled-color;
|
||||
background-color: @pagination-item-disabled-background-color;
|
||||
opacity: @pagination-disabled-opacity;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @white;
|
||||
background-color: @pagination-item-default-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&__page {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&__page-desc {
|
||||
flex: 1;
|
||||
height: @pagination-height;
|
||||
color: @pagination-desc-color;
|
||||
}
|
||||
|
||||
&--simple {
|
||||
.van-pagination__prev,
|
||||
.van-pagination__next {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/pagination/test/__snapshots__/demo.spec.js.snap
Normal file
34
src/pagination/test/__snapshots__/demo.spec.js.snap
Normal file
@@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">2</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">3</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">4</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">5</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="van-pagination van-pagination--simple" size="small">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
|
||||
<li class="van-pagination__page-desc">1/12</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">2</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">3</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">...</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
4
src/pagination/test/demo.spec.js
Normal file
4
src/pagination/test/demo.spec.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
75
src/pagination/zh-CN.md
Normal file
75
src/pagination/zh-CN.md
Normal file
@@ -0,0 +1,75 @@
|
||||
|
||||
# Pagination 分页
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Pagination } from 'vant';
|
||||
|
||||
Vue.use(Pagination);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 简单模式
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:page-count="12"
|
||||
mode="simple"
|
||||
/>
|
||||
```
|
||||
|
||||
### 显示省略号
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
force-ellipses
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 当前页码 | `Number` | - | - |
|
||||
| mode | 显示模式，可选值为 `simple` `multi` | `String` | `multi` | - |
|
||||
| total-items | 总记录数 | `Number` | `0` | - |
|
||||
| items-per-page | 每页记录数 | `Number` | `10` | - |
|
||||
| page-count | 总页数 | `Number` | `根据页数计算` | - |
|
||||
| prev-text | 上一页 | `String` | `上一页` | - |
|
||||
| next-text | 下一页 | `String` | `下一页` | - |
|
||||
| show-page-size | 显示的页码个数 | `Number` | `5` | - |
|
||||
| force-ellipses | 显示省略号 | `Boolean` | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 页码改变时触发 | - |
|
||||
Reference in New Issue
Block a user