alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan
2020-09-22 19:42:24 +08:00
parent 4f0921cbdf 106114333b
commit 8ef46764c9
20 changed files with 245 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pagination/README.md
+22
View File
@@ -45,6 +45,20 @@ export default {
/>
```
### Custom Render
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
```
## API
### Props
@@ -66,3 +80,11 @@ export default {
| Event | Description | Arguments |
| ------ | ------------------------ | --------- |
| change | Triggered on page change | - |
### Slots
| Name | Description | Default |
| --- | --- | --- |
| prev-text | custom prev slot | `-` |
| next-text | custom next slot | `-` |
| page | pagination item slot | `{ number: number, text: string, active: boolean }` |
src/pagination/README.zh-CN.md
+22
View File
@@ -45,6 +45,20 @@ export default {
/>
```
### 自定义渲染
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
```
## API
### Props
@@ -66,3 +80,11 @@ export default {
| 事件名 | 说明 | 回调参数 |
| ------ | -------------- | -------- |
| change | 页码改变时触发 | - |
### Slots
| 名称 | 描述 | 默认值 |
| --- | --- | --- |
| prev-text | 自定义上一页插槽 | `-` |
| next-text | 自定义下一页插槽 | `-` |
| page | 自定义页码插槽 | `{ number: number, text: string, active: boolean }` |
src/pagination/demo/index.vue
+19
View File
@@ -31,6 +31,22 @@
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('title4')">
<van-pagination
v-model="currentPage4"
:total-items="125"
:show-page-size="5"
>
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
</demo-block>
</demo-section>
</template>
@@ -40,12 +56,14 @@ export default {
'zh-CN': {
title2: '简单模式',
title3: '显示省略号',
title4: '自定义渲染',
prevText: '上一页',
nextText: '下一页',
},
'en-US': {
title2: 'Simple Mode',
title3: 'Show ellipses',
title4: 'Custom Render',
prevText: 'Prev',
nextText: 'Next',
},
@@ -56,6 +74,7 @@ export default {
currentPage1: 1,
currentPage2: 1,
currentPage3: 1,
currentPage4: 1,
};
},
};
src/pagination/index.js
+7 -3
View File
@@ -142,7 +142,9 @@ export default createComponent({
]}
onClick={onSelect(value - 1)}
>
{props.prevText || t('prev')}
{slots['prev-text']
? slots['prev-text']()
: props.prevText || t('prev')}
</li>
{pages.value.map((page) => (
<li
@@ -153,7 +155,7 @@ export default createComponent({
]}
onClick={onSelect(page.number)}
>
{page.text}
{slots.page ? slots.page(page) : page.text}
</li>
))}
{renderDesc()}
@@ -165,7 +167,9 @@ export default createComponent({
]}
onClick={onSelect(value + 1)}
>
{props.nextText || t('next')}
{slots['next-text']
? slots['next-text']()
: props.nextText || t('next')}
</li>
</ul>
);
src/pagination/test/__snapshots__/demo.spec.js.snap
+13
View File
@@ -30,5 +30,18 @@ exports[`renders demo correctly 1`] = `
<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"><i class="van-icon van-icon-arrow-left">
<!----></i></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"><i class="van-icon van-icon-arrow">
<!----></i></li>
</ul>
</div>
</div>
`;
src/pagination/test/__snapshots__/index.spec.js.snap
+25
View File
@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render page slot 1`] = `
<ul class="van-pagination">
<li class="van-pagination__item van-pagination__prev van-hairline">上一页</li>
<li class="van-pagination__item 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>
`;
exports[`render prev-text & next-text slot 1`] = `
<ul class="van-pagination">
<li class="van-pagination__item van-pagination__prev van-hairline">Custom PrevText</li>
<li class="van-pagination__item 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">Custom NextText</li>
</ul>
`;
src/pagination/test/index.spec.js
+31
View File
@@ -0,0 +1,31 @@
import { mount } from '../../../test';
import Paginaion from '..';
test('render prev-text & next-text slot', () => {
const wrapper = mount(Paginaion, {
propsData: {
totalItems: 50,
showPageSize: 5,
},
scopedSlots: {
'prev-text': () => 'Custom PrevText',
'next-text': () => 'Custom NextText',
},
});
expect(wrapper).toMatchSnapshot();
});
test('render page slot', () => {
const wrapper = mount(Paginaion, {
propsData: {
totalItems: 50,
showPageSize: 5,
},
scopedSlots: {
page: ({ text }) => `${text}`,
},
});
expect(wrapper).toMatchSnapshot();
});