feat: 新增 showFirstAndLastPageBtn、showPreviousAndNextBtn api

examples/pagination/demos/base.vue

@@ -15,6 +15,7 @@
       :total="36"
       :default-current="2"
       :default-page-size="10"
+      show-first-and-last-page-btn
       @current-change="onCurrentChange"
       @page-size-change="onPageSizeChange"
       @change="onChange"

examples/pagination/pagination.md

@@ -13,7 +13,9 @@ maxPageBtn | Number | 10 | 最多显示页码按钮数 | N
 pageSize | Number | 10 | 分页总页数。支持语法糖 `v-model:pageSize` | N
 defaultPageSize | Number | 10 | 分页总页数。非受控属性 | N
 pageSizeOptions | Array | () => [5, 10, 20, 50] | 分页大小控制器，值为 [] 则不显示。TS 类型：`Array<number | { label: string; value: number }>` | N
+showFirstAndLastPageBtn | Boolean | false | 是否显示跳转首页尾页页码控制器 | N
 showJumper | Boolean | false | 是否显示跳转页码控制器 | N
+showPreviousAndNextBtn | Boolean | true | 是否显示跳转前后页页码控制器 | N
 size | String | medium | 分页组件尺寸。可选项：small/medium | N
 theme | String | default | 分页组件风格。可选项：default/simple | N
 total | Number | 0 | 数据总条数 | N

examples/pagination/usage/props.json

@@ -5,12 +5,24 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "showFirstAndLastPageBtn",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "showJumper",
     "type": "Boolean",
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "showPreviousAndNextBtn",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
   {
     "name": "size",
     "type": "enum",

src/pagination/pagination.tsx

@@ -1,6 +1,8 @@
 import { defineComponent, computed, ref, watch, toRefs } from 'vue';
 import isNaN from 'lodash/isNaN';
 import {
+  PageFirstIcon,
+  PageLastIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronLeftDoubleIcon,
@@ -232,15 +234,22 @@ export default defineComponent({
             ))}
           </Select>
         )}
-
+        {/* 首页按钮 */}
+        {this.showFirstAndLastPageBtn ? (
+          <div class={this.preBtnClass} onClick={() => this.toPage(1)} disabled={this.disabled || this.current === min}>
+            <PageFirstIcon />
+          </div>
+        ) : null}
         {/* 向前按钮 */}
-        <div
-          class={this.preBtnClass}
-          onClick={() => this.handlePageChange('prevPage')}
-          disabled={disabled || innerCurrent === min}
-        >
-          <ChevronLeftIcon />
-        </div>
+        {this.showPreviousAndNextBtn ? (
+          <div
+            class={this.preBtnClass}
+            onClick={() => this.handlePageChange('prevPage')}
+            disabled={disabled || innerCurrent === min}
+          >
+            <ChevronLeftIcon />
+          </div>
+        ) : null}
         {/* 页数 */}
         {!this.isSimple ? (
           <ul class={this.btnWrapClass}>
@@ -291,14 +300,25 @@ export default defineComponent({
           />
         )}
         {/* 向后按钮 */}
-        <div
-          class={this.nextBtnClass}
-          onClick={() => this.handlePageChange('nextPage')}
-          disabled={disabled || innerCurrent === this.pageCount}
-        >
-          <ChevronRightIcon />
-        </div>
-        {/* 跳转 */}
+        {this.showPreviousAndNextBtn ? (
+          <div
+            class={this.nextBtnClass}
+            onClick={() => this.handlePageChange('nextPage')}
+            disabled={disabled || innerCurrent === this.pageCount}
+          >
+            <ChevronRightIcon />
+          </div>
+        ) : null}
+        {/* 尾页按钮 */}
+        {this.showFirstAndLastPageBtn ? (
+          <div
+            class={this.nextBtnClass}
+            onClick={() => this.toPage(this.pageCount)}
+            disabled={this.disabled || this.current === this.pageCount}
+          >
+            <PageLastIcon />
+          </div>
+        ) : null}
         {/* 跳转 */}
         {showJumper ? (
           <div class={this.jumperClass}>
@@ -310,6 +330,8 @@ export default defineComponent({
               onEnter={this.onJumperChange}
               max={this.pageCount}
               min={min}
+              size={size}
+              disabled={this.disabled}
               theme="normal"
               placeholder=""
             />

src/pagination/props.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
  * */
 
 import { TdPaginationProps } from './type';
@@ -12,11 +11,7 @@ export default {
   /** 当前页 */
   current: {
     type: Number,
-    default: undefined,
-  },
-  modelValue: {
-    type: Number,
-    default: undefined,
+    default: 1,
   },
   /** 当前页，非受控属性 */
   defaultCurrent: {
@@ -38,7 +33,7 @@ export default {
   /** 分页总页数 */
   pageSize: {
     type: Number,
-    default: undefined,
+    default: 10,
   },
   /** 分页总页数，非受控属性 */
   defaultPageSize: {
@@ -50,13 +45,21 @@ export default {
     type: Array as PropType<TdPaginationProps['pageSizeOptions']>,
     default: () => [5, 10, 20, 50],
   },
+  /** 是否显示跳转首页尾页页码控制器 */
+  showFirstAndLastPageBtn: Boolean,
   /** 是否显示跳转页码控制器 */
   showJumper: Boolean,
+  /** 是否显示跳转前后页页码控制器 */
+  showPreviousAndNextBtn: {
+    type: Boolean,
+    default: true,
+  },
   /** 分页组件尺寸 */
   size: {
     type: String as PropType<TdPaginationProps['size']>,
     default: 'medium' as TdPaginationProps['size'],
     validator(val: TdPaginationProps['size']): boolean {
+      if (!val) return true;
       return ['small', 'medium'].includes(val);
     },
   },
@@ -65,6 +68,7 @@ export default {
     type: String as PropType<TdPaginationProps['theme']>,
     default: 'default' as TdPaginationProps['theme'],
     validator(val: TdPaginationProps['theme']): boolean {
+      if (!val) return true;
       return ['default', 'simple'].includes(val);
     },
   },

src/pagination/type.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
  * */
 
 import { TNode } from '../common';
@@ -18,6 +17,11 @@ export interface TdPaginationProps {
    * @default 1
    */
   defaultCurrent?: number;
+  /**
+   * 当前页
+   * @default 1
+   */
+  modelValue?: number;
   /**
    * 是否禁用分页组件
    * @default false
@@ -48,11 +52,21 @@ export interface TdPaginationProps {
    * @default () => [5, 10, 20, 50]
    */
   pageSizeOptions?: Array<number | { label: string; value: number }>;
+  /**
+   * 是否显示跳转首页尾页页码控制器
+   * @default false
+   */
+  showFirstAndLastPageBtn?: boolean;
   /**
    * 是否显示跳转页码控制器
    * @default false
    */
   showJumper?: boolean;
+  /**
+   * 是否显示跳转前后页页码控制器
+   * @default true
+   */
+  showPreviousAndNextBtn?: boolean;
   /**
    * 分页组件尺寸
    * @default medium

test/unit/config-provider/__snapshots__/demo.test.js.snap

@@ -3263,6 +3263,7 @@ exports[`ConfigProvider ConfigProvider othersVue demo works fine 1`] = `
 exports[`ConfigProvider ConfigProvider paginationVue demo works fine 1`] = `
 <div
   class="t-pagination t-size-m"
+  modelvalue="1"
   style="padding: 16px;"
 >
   <div
@@ -3318,6 +3319,7 @@ exports[`ConfigProvider ConfigProvider paginationVue demo works fine 1`] = `
     <!---->
     
   </div>
+  <!---->
   <div
     class="t-pagination__btn t-pagination__btn-prev t-is-disabled"
     disabled="true"
@@ -3384,6 +3386,7 @@ exports[`ConfigProvider ConfigProvider paginationVue demo works fine 1`] = `
       />
     </svg>
   </div>
+  <!---->
   <div
     class="t-pagination__jump"
   >