feat(Guide): support counter props

src/guide/README.en-US.md

@@ -9,6 +9,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 back-button-props | Object | - | Typescript：`ButtonProps` | N
+counter | String / Function | - | Typescript：`string \| ((params: { total: number; current: number }) => string)` | N
 current | Number | - | \- | N
 default-current | Number | undefined | uncontrolled property | N
 finish-button-props | Object | - | Typescript：`ButtonProps` | N

src/guide/README.md

@@ -57,6 +57,7 @@ isComponent: true
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 back-button-props | Object | - | 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
+counter | String / Function | - | 用于自定义渲染计数部分。TS 类型：`string \| ((params: { total: number; current: number }) => string)` | N
 current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | N
 default-current | Number | undefined | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
 finish-button-props | Object | - | 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N

src/guide/guide.ts

@@ -1,3 +1,4 @@
+import isFunction from 'lodash/isFunction';
 import { SuperComponent, wxComponent } from '../common/src/index';
 import props from './props';
 import config from '../common/config';
@@ -172,9 +173,16 @@ export default class Guide extends SuperComponent {
         finishButton,
       };
     },
+    renderCounter() {
+      const { steps, current, counter } = this.data;
+      const stepsTotal = steps.length;
+      const innerCurrent = current + 1;
+      const popupSlotCounter = isFunction(counter) ? counter({ total: stepsTotal, current: innerCurrent }) : counter;
+      return counter ? popupSlotCounter : `(${innerCurrent}/${stepsTotal})`;
+    },
     buttonContent(button) {
-      const { steps, current, hideCounter } = this.data;
-      return `${button.content.replace(/ \(.*?\)/, '')}${hideCounter ? '' : ` (${current + 1}/${steps.length})`}`;
+      const { hideCounter } = this.data;
+      return `${button.content.replace(/ \(.*?\)/, '')} ${hideCounter ? '' : this.renderCounter()}`;
     },
     onTplButtonTap(e) {
       const { type } = e.target.dataset;

src/guide/props.ts

@@ -10,6 +10,10 @@ const props: TdGuideProps = {
   backButtonProps: {
     type: Object,
   },
+  /** 用于自定义渲染计数部分 */
+  counter: {
+    type: null,
+  },
   /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */
   current: {
     type: Number,

src/guide/type.ts

@@ -14,6 +14,13 @@ export interface TdGuideProps {
     type: ObjectConstructor;
     value?: ButtonProps;
   };
+  /**
+   * 用于自定义渲染计数部分
+   */
+  counter?: {
+    type: StringConstructor;
+    value?: string | ((params: { total: number; current: number }) => string);
+  };
   /**
    * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
    */