From bb9619ea766a169f78ebdeae8100d869702be9a9 Mon Sep 17 00:00:00 2001 From: demoadminjie Date: Thu, 9 Jan 2025 18:48:16 +0800 Subject: [PATCH 1/2] feat(Guide): support counter props --- src/guide/README.en-US.md | 1 + src/guide/README.md | 1 + src/guide/_example/base/index.js | 5 +++++ src/guide/_example/base/index.wxml | 2 +- src/guide/guide.ts | 12 ++++++++++-- src/guide/props.ts | 4 ++++ src/guide/type.ts | 7 +++++++ 7 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/guide/README.en-US.md b/src/guide/README.en-US.md index 7c9ad57f7..9091588ab 100644 --- a/src/guide/README.en-US.md +++ b/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 diff --git a/src/guide/README.md b/src/guide/README.md index dc879efaa..855c2b35a 100644 --- a/src/guide/README.md +++ b/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 diff --git a/src/guide/_example/base/index.js b/src/guide/_example/base/index.js index 2b8718476..1df222e23 100644 --- a/src/guide/_example/base/index.js +++ b/src/guide/_example/base/index.js @@ -2,6 +2,11 @@ Component({ data: { current: -1, steps: [], + customerCounter({ total, current }) { + const enums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']; + return ` ${enums[current]}/${enums[total]}`; + }, + // customerCounter: 'customerCounter', }, lifetimes: { attached() { diff --git a/src/guide/_example/base/index.wxml b/src/guide/_example/base/index.wxml index 6e516da59..cf13c4880 100644 --- a/src/guide/_example/base/index.wxml +++ b/src/guide/_example/base/index.wxml @@ -15,6 +15,6 @@ - + slot展示 用户引导的说明文案 diff --git a/src/guide/guide.ts b/src/guide/guide.ts index a4e03fd3d..7472c2ac8 100644 --- a/src/guide/guide.ts +++ b/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; diff --git a/src/guide/props.ts b/src/guide/props.ts index 3c4f1d878..acf22039f 100644 --- a/src/guide/props.ts +++ b/src/guide/props.ts @@ -10,6 +10,10 @@ const props: TdGuideProps = { backButtonProps: { type: Object, }, + /** 用于自定义渲染计数部分 */ + counter: { + type: null, + }, /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */ current: { type: Number, diff --git a/src/guide/type.ts b/src/guide/type.ts index e26e1fc75..6bd3cbd94 100644 --- a/src/guide/type.ts +++ b/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 则不展示，用于需要中断展示的场景 */ From e70d0cf31b9e5abd66fee140edcdbff400d615d3 Mon Sep 17 00:00:00 2001 From: demoadminjie Date: Thu, 9 Jan 2025 20:18:27 +0800 Subject: [PATCH 2/2] fix(Guide): fix counter docs --- src/guide/_example/base/index.js | 5 ----- src/guide/_example/base/index.wxml | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/guide/_example/base/index.js b/src/guide/_example/base/index.js index 1df222e23..2b8718476 100644 --- a/src/guide/_example/base/index.js +++ b/src/guide/_example/base/index.js @@ -2,11 +2,6 @@ Component({ data: { current: -1, steps: [], - customerCounter({ total, current }) { - const enums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']; - return ` ${enums[current]}/${enums[total]}`; - }, - // customerCounter: 'customerCounter', }, lifetimes: { attached() { diff --git a/src/guide/_example/base/index.wxml b/src/guide/_example/base/index.wxml index cf13c4880..6e516da59 100644 --- a/src/guide/_example/base/index.wxml +++ b/src/guide/_example/base/index.wxml @@ -15,6 +15,6 @@ - + slot展示 用户引导的说明文案