diff --git a/docs/zh-CN/components/wizard.md b/docs/zh-CN/components/wizard.md index 3e0f5b75e..d15a8f2aa 100755 --- a/docs/zh-CN/components/wizard.md +++ b/docs/zh-CN/components/wizard.md @@ -55,6 +55,167 @@ order: 73 } ``` +## 自定义按钮 + +可以在每个 `step` 中配置 `actions` 来自定义按钮。 + +```schema: scope="body" +{ + "type": "wizard", + "steps": [ + { + "title": "第一步", + "body": [ + { + "name": "website", + "label": "网址", + "type": "input-url" + }, + { + "name": "email", + "label": "邮箱", + "type": "input-email" + } + ], + actions: [ + { + label: "Next", + type: 'button', + actionType: 'next' + } + ] + }, + { + "title": "Step 2", + "body": [ + { + "name": "email2", + "label": "邮箱", + "type": "input-email" + } + ], + actions: [ + { + label: "Prev", + type: 'button', + actionType: 'prev' + }, + + { + label: "Submit", + type: 'button', + actionType: 'next' + } + ] + }, + { + "title": "Step 3", + "body": [ + "这是最后一步了, 没有按钮" + ], + actions: [] + } + ] +} +``` + +## 初始化到某一步 + +`initApi` 接口返回 `step` 字段即可,注意得是数字类型。`1` 表示第一步,`2` 表示第二步,以此类推 + +```schema: scope="body" +{ + "type": "wizard", + "initApi": "/api/mock2/initWizard", + "steps": [ + { + "title": "第一步", + "body": [ + { + "name": "website", + "label": "网址", + "type": "input-url", + "required": true + }, + { + "name": "email", + "label": "邮箱", + "type": "input-email", + "required": true + } + ] + }, + { + "title": "Step 2", + "body": [ + { + "name": "email2", + "label": "邮箱", + "type": "input-email", + "required": true + } + ] + }, + { + "title": "Step 3", + "body": [ + "这是最后一步了" + ] + } + ] +} +``` + +## 限制跳转 + +可以通过在 step 上配置 `jumpableOn` 来限制跳转,可以基于整体 wizard 数据,或者基于 `currentStep` 来判断。 + +比如:`"jumpableOn": "${!website}",` 当设置完成了 website 后不可以回去跳转 + +```schema: scope="body" +{ + "type": "wizard", + "initApi": "/api/mock2/initWizard", + "steps": [ + { + "title": "第一步", + "jumpableOn": "${!website}", + "body": [ + { + "name": "website", + "label": "网址", + "type": "input-url", + "required": true + }, + { + "name": "email", + "label": "邮箱", + "type": "input-email", + "required": true + } + ] + }, + { + "title": "Step 2", + "body": [ + { + "name": "email2", + "label": "邮箱", + "type": "input-email", + "required": true + } + ] + }, + { + "title": "Step 3", + "body": [ + "这是最后一步了" + ] + } + ] +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | @@ -93,6 +254,8 @@ order: 73 | initFetchOn | [表达式](../../docs/concepts/expression) | | 当前步骤数据初始化接口是否初始拉取,用表达式来决定。 | | body | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合,请参考 [FormItem](./form/formItem)。 | | closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 widzard 里面有且只有一个弹窗的时候,本身提交会触发弹窗关闭,此属性可以关闭此行为 | +| jumpableOn | `string` | | 配置是否可跳转的表达式 | +| actions | `Array` | | 自定义每一步的操作按钮 | ## 事件表 diff --git a/index.html b/index.html index 7aaa7a912..214e3fe50 100644 --- a/index.html +++ b/index.html @@ -7,27 +7,27 @@ - - + + - - + + - +