From 106114333b197cbfadbbdeb299326b59819f28dc Mon Sep 17 00:00:00 2001 From: JSparow Date: Tue, 22 Sep 2020 19:10:43 +0800 Subject: [PATCH] feat(Pagination): pagination item custom render (#7222) * feat(Pagination): pagination item custom render * fix(Pagination): fix test result * fix(Pagination): expose page object directly --- src/pagination/README.md | 22 +++++++++++++ src/pagination/README.zh-CN.md | 22 +++++++++++++ src/pagination/demo/index.vue | 19 ++++++++++++ src/pagination/index.js | 6 ++-- .../test/__snapshots__/demo.spec.js.snap | 13 ++++++++ .../test/__snapshots__/index.spec.js.snap | 25 +++++++++++++++ src/pagination/test/index.spec.js | 31 +++++++++++++++++++ 7 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 src/pagination/test/__snapshots__/index.spec.js.snap create mode 100644 src/pagination/test/index.spec.js 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 + + + + + +``` + ## 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 + + + + + +``` + ## 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')" /> + + + + + + + + @@ -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(); +});