mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Pagination): pagination item custom render (#7222)
* feat(Pagination): pagination item custom render * fix(Pagination): fix test result * fix(Pagination): expose page object directly
This commit is contained in:
JSparow
GitHub
parent
1eca65d05b
commit
106114333b
@ -44,6 +44,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
|
||||
@ -65,3 +79,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 }` |
|
||||
|
||||
@ -44,6 +44,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
|
||||
@ -65,3 +79,11 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | -------------- | -------- |
|
||||
| change | 页码改变时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 描述 | 默认值 |
|
||||
| --- | --- | --- |
|
||||
| prev-text | 自定义上一页插槽 | `-` |
|
||||
| next-text | 自定义下一页插槽 | `-` |
|
||||
| page | 自定义页码插槽 | `{ number: number, text: string, active: boolean }` |
|
||||
|
||||
@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -131,14 +131,14 @@ export default createComponent({
|
||||
class={[bem('item', { disabled: value === 1 }), bem('prev'), BORDER]}
|
||||
onClick={onSelect(value - 1)}
|
||||
>
|
||||
{this.prevText || t('prev')}
|
||||
{(this.slots('prev-text') ?? this.prevText) || t('prev')}
|
||||
</li>
|
||||
{this.pages.map((page) => (
|
||||
<li
|
||||
class={[bem('item', { active: page.active }), bem('page'), BORDER]}
|
||||
onClick={onSelect(page.number)}
|
||||
>
|
||||
{page.text}
|
||||
{this.slots('page', page) ?? page.text}
|
||||
</li>
|
||||
))}
|
||||
{simple && (
|
||||
@ -154,7 +154,7 @@ export default createComponent({
|
||||
]}
|
||||
onClick={onSelect(value + 1)}
|
||||
>
|
||||
{this.nextText || t('next')}
|
||||
{(this.slots('next-text') ?? this.nextText) || t('next')}
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
25
src/pagination/test/__snapshots__/index.spec.js.snap
Normal file
25
src/pagination/test/__snapshots__/index.spec.js.snap
Normal 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>
|
||||
`;
|
||||
31
src/pagination/test/index.spec.js
Normal file
31
src/pagination/test/index.spec.js
Normal 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();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user