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

@@ -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 }` |

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 }` |

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,
     };
   },
 };

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>
     );

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>
 `;

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>
+`;

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();
+});