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
+
+
+
+
+
+
+
+ {{ text }}
+
+```
+
## 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
+
+
+
+
+
+
+
+ {{ text }}
+
+```
+
## 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')"
/>
+
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
@@ -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')}
{this.pages.map((page) => (
- {page.text}
+ {this.slots('page', page) ?? page.text}
))}
{simple && (
@@ -154,7 +154,7 @@ export default createComponent({
]}
onClick={onSelect(value + 1)}
>
- {this.nextText || t('next')}
+ {(this.slots('next-text') ?? this.nextText) || t('next')}
);
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`] = `
+
+
+
`;
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`] = `
+
+`;
+
+exports[`render prev-text & next-text slot 1`] = `
+
+`;
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();
+});