diff --git a/src/pagination/README.md b/src/pagination/README.md
index 42ca945df..ecdcb77d9 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -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 }` |
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index 89a5dcb44..9363fd0c2 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -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 }` |
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index ddeecf243..95b56d3c6 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -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,
};
},
};
diff --git a/src/pagination/index.js b/src/pagination/index.js
index a0e07c29c..33cdc9f9f 100644
--- a/src/pagination/index.js
+++ b/src/pagination/index.js
@@ -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>
);
diff --git a/src/pagination/test/__snapshots__/demo.spec.js.snap b/src/pagination/test/__snapshots__/demo.spec.js.snap
index c4e54ef49..4b4c78a6a 100644
--- a/src/pagination/test/__snapshots__/demo.spec.js.snap
+++ b/src/pagination/test/__snapshots__/demo.spec.js.snap
@@ -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>
`;
diff --git a/src/pagination/test/__snapshots__/index.spec.js.snap b/src/pagination/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..440c7e3d6
--- /dev/null
+++ b/src/pagination/test/__snapshots__/index.spec.js.snap
@@ -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>
+`;
diff --git a/src/pagination/test/index.spec.js b/src/pagination/test/index.spec.js
new file mode 100644
index 000000000..3996c8532
--- /dev/null
+++ b/src/pagination/test/index.spec.js
@@ -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();
+});