Skip to content

Commit d3d9c77

Browse files
anlyyaoanlyyao
authored
feat(Guide): support hideBack props (#3403)
1 parent 70f2ac4 commit d3d9c77

File tree

7 files changed

+54
-13
lines changed

7 files changed

+54
-13
lines changed

‎src/guide/README.en-US.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
1111
back-button-props | Object | - | Typescript：`ButtonProps` | N
1212
current | Number | - | \- | N
13+
default-current | Number | undefined | uncontrolled property | N
1314
finish-button-props | Object | - | Typescript：`ButtonProps` | N
15+
hide-back | Boolean | false | \- | N
1416
hide-counter | Boolean | false | \- | N
1517
hide-skip | Boolean | false | \- | N
1618
highlight-padding | Number | 16 | \- | N
@@ -31,6 +33,7 @@ change | `(current: number, context?: { total: number })` | \-
3133
finish | `(detail: { current: number, total: number })` | \-
3234
next-step-click | `(detail: { next: number, current: number, total: number })` | \-
3335
skip | `(detail: { current: number, total: number })` | \-
36+
3437
### Guide External Classes
3538

3639
className | Description
@@ -58,7 +61,7 @@ finish-button-props | Object | - | Typescript：`ButtonProps` | N
5861
highlight-padding | Number | - | \- | N
5962
mode | String | - | options: popover/dialog | N
6063
next-button-props | Object | - | Typescript：`ButtonProps` | N
61-
offset | Array | - | this api is in discussing. do not use it.。Typescript：`Array<string \| number>` | N
64+
offset | Array | - | this api is in discussing. do not use it。Typescript：`Array<string \| number>` | N
6265
placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
6366
show-overlay | Boolean | true | \- | N
6467
skip-button-props | Object | - | Typescript：`ButtonProps` | N

‎src/guide/README.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,19 @@ isComponent: true
5656
-- | -- | -- | -- | --
5757
style | Object | - | 样式 | N
5858
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
59-
back-button-props | Object | - | 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
59+
back-button-props | Object | - | 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
6060
current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | N
61-
finish-button-props | Object | - | 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
61+
default-current | Number | undefined | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
62+
finish-button-props | Object | - | 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
63+
hide-back | Boolean | false | 是否隐藏返回按钮 | N
6264
hide-counter | Boolean | false | 是否隐藏计数 | N
6365
hide-skip | Boolean | false | 是否隐藏跳过按钮 | N
6466
highlight-padding | Number | 16 | 高亮框的内边距，单位rpx | N
6567
mode | String | popover | 引导框的类型。可选项：popover/dialog | N
6668
next-button-props | Object | - | 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/guide/type.ts) | N
6769
show-overlay | Boolean | true | 是否出现遮罩层 | N
6870
skip-button-props | Object | - | 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps` | N
69-
steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。。TS 类型：`Array<GuideStep>` | N
71+
steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。TS 类型：`Array<GuideStep>` | N
7072
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
7173
z-index | Number | 999999 | 提示框的层级 | N
7274

@@ -79,6 +81,7 @@ change | `(current: number, context?: { total: number })` | 当前步骤发生
7981
finish | `(detail: { current: number, total: number })` | 点击完成按钮时触发
8082
next-step-click | `(detail: { next: number, current: number, total: number })` | 点击下一步时触发
8183
skip | `(detail: { current: number, total: number })` | 点击跳过按钮时触发
84+
8285
### Guide External Classes
8386

8487
类名 | 描述

‎src/guide/content.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
<view wx:if="{{body}}" class="{{prefix}}-class-body {{classPrefix}}__body--{{modeType}}">{{body}}</view>
99
<slot wx:else name="body-{{current}}" />
1010
</view>
11-
<view class="{{prefix}}-class-footer {{classPrefix}}__footer {{classPrefix}}__footer--{{modeType}}">
11+
<view
12+
wx:if="{{current !== -1}}"
13+
class="{{prefix}}-class-footer {{classPrefix}}__footer {{classPrefix}}__footer--{{modeType}}"
14+
>
1215
<template is="button" wx:if="{{current < steps.length - 1 && !hideSkip}}" data="{{...skipButton}}" />
13-
<template is="button" wx:else data="{{...backButton}}" />
16+
<template is="button" wx:elif="{{current === steps.length - 1 && !hideBack}}" data="{{...backButton}}" />
1417
<template is="button" wx:if="{{current < steps.length - 1}}" data="{{...nextButton}}" />
1518
<template is="button" wx:else data="{{...finishButton}}" />
1619
</view>

‎src/guide/guide.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ export default class Guide extends SuperComponent {
4848
modeType: '',
4949
};
5050

51+
controlledProps = [
52+
{
53+
key: 'current',
54+
event: 'change',
55+
},
56+
];
57+
5158
observers = {
5259
async 'steps, current, showOverlay'() {
5360
this._init();

‎src/guide/guide.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
>
1919
<template
2020
is="content"
21-
data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, ...buttonProps }}"
21+
data="{{ prefix, classPrefix, title, body, steps, current, modeType, hideSkip, hideBack, ...buttonProps }}"
2222
/>
2323
</view>
2424
</view>

‎src/guide/props.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,28 @@
66

77
import { TdGuideProps } from './type';
88
const props: TdGuideProps = {
9-
/** 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }` */
9+
/** 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }` */
1010
backButtonProps: {
1111
type: Object,
1212
},
1313
/** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */
1414
current: {
1515
type: Number,
16+
value: null,
1617
},
17-
/** 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }` */
18+
/** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性 */
19+
defaultCurrent: {
20+
type: Number,
21+
},
22+
/** 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }` */
1823
finishButtonProps: {
1924
type: Object,
2025
},
26+
/** 是否隐藏返回按钮 */
27+
hideBack: {
28+
type: Boolean,
29+
value: false,
30+
},
2131
/** 是否隐藏计数 */
2232
hideCounter: {
2333
type: Boolean,
@@ -51,7 +61,7 @@ const props: TdGuideProps = {
5161
skipButtonProps: {
5262
type: Object,
5363
},
54-
/** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。 */
64+
/** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等 */
5565
steps: {
5666
type: Array,
5767
},

‎src/guide/type.ts

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ButtonProps } from '../button/index';
88

99
export interface TdGuideProps {
1010
/**
11-
* 透传 返回 的全部属性，示例：`{ content: '返回', theme: 'default' }`
11+
* 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`
1212
*/
1313
backButtonProps?: {
1414
type: ObjectConstructor;
@@ -22,12 +22,27 @@ export interface TdGuideProps {
2222
value?: number;
2323
};
2424
/**
25-
* 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
25+
* 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性
26+
*/
27+
defaultCurrent?: {
28+
type: NumberConstructor;
29+
value?: number;
30+
};
31+
/**
32+
* 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
2633
*/
2734
finishButtonProps?: {
2835
type: ObjectConstructor;
2936
value?: ButtonProps;
3037
};
38+
/**
39+
* 是否隐藏返回按钮
40+
* @default false
41+
*/
42+
hideBack?: {
43+
type: BooleanConstructor;
44+
value?: boolean;
45+
};
3146
/**
3247
* 是否隐藏计数
3348
* @default false
@@ -83,7 +98,7 @@ export interface TdGuideProps {
8398
value?: ButtonProps;
8499
};
85100
/**
86-
* 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。
101+
* 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等
87102
*/
88103
steps?: {
89104
type: ArrayConstructor;

0 commit comments

Comments
 (0)