mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-01 19:38:16 +08:00
docs: 补充 wizard 文档 & 优化 vite 响应 /examples/index 页面
This commit is contained in:
2betop
parent
bfedae3165
commit
8a5e9ab398
@ -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<Schema>` | | 自定义每一步的操作按钮 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
16
index.html
16
index.html
@ -7,27 +7,27 @@
|
||||
<link
|
||||
type="image/x-icon"
|
||||
rel="shortcut icon"
|
||||
href="./examples/static/favicon.png"
|
||||
href="/examples/static/favicon.png"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="./examples/static/iconfont.css" />
|
||||
<link rel="stylesheet" href="./examples/static/officefont.css" />
|
||||
<link rel="stylesheet" href="/examples/static/iconfont.css" />
|
||||
<link rel="stylesheet" href="/examples/static/officefont.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
href="/node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
href="/node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="./examples/doc.css" />
|
||||
<link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="/examples/doc.css" />
|
||||
|
||||
<link rel="stylesheet" href="./examples/style.scss" />
|
||||
<link rel="stylesheet" href="/examples/style.scss" />
|
||||
<style>
|
||||
.app-wrapper,
|
||||
.schema-wrapper {
|
||||
|
||||
9
mock/cfc/mock/initWizard.json
Normal file
9
mock/cfc/mock/initWizard.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"status": 0,
|
||||
"data": {
|
||||
"email": "xxxx@baidu.com",
|
||||
"website": "http://www.baidu.com",
|
||||
"email2": "yyyy@baidu.com",
|
||||
"step": 2
|
||||
}
|
||||
}
|
||||
@ -286,37 +286,43 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
|
||||
);
|
||||
}
|
||||
})
|
||||
.then(value => {
|
||||
this.handleFetchInitEvent(value);
|
||||
.then(result => {
|
||||
this.handleFetchInitEvent(result);
|
||||
|
||||
const state = {
|
||||
currentStep:
|
||||
typeof this.props.startStep === 'string'
|
||||
? toNumber(tokenize(this.props.startStep, this.props.data), 1)
|
||||
? toNumber(
|
||||
tokenize(
|
||||
this.props.startStep,
|
||||
createObject(this.props.data, result?.data || {})
|
||||
),
|
||||
1
|
||||
)
|
||||
: 1
|
||||
};
|
||||
|
||||
if (
|
||||
value &&
|
||||
value.data &&
|
||||
(typeof value.data.step === 'number' ||
|
||||
(typeof value.data.step === 'string' &&
|
||||
/^\d+$/.test(value.data.step)))
|
||||
result &&
|
||||
result.data &&
|
||||
(typeof result.data.step === 'number' ||
|
||||
(typeof result.data.step === 'string' &&
|
||||
/^\d+$/.test(result.data.step)))
|
||||
) {
|
||||
state.currentStep = toNumber(value.data.step, 1);
|
||||
state.currentStep = toNumber(result.data.step, 1);
|
||||
}
|
||||
|
||||
this.setState(state, () => {
|
||||
// 如果 initApi 返回的状态是正在提交，则进入轮顺状态。
|
||||
if (
|
||||
value &&
|
||||
value.data &&
|
||||
(value.data.submiting || value.data.submited)
|
||||
result &&
|
||||
result.data &&
|
||||
(result.data.submiting || result.data.submited)
|
||||
) {
|
||||
this.checkSubmit();
|
||||
}
|
||||
});
|
||||
return value;
|
||||
return result;
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
|
||||
@ -27,6 +27,22 @@ export default function mockApiPlugin(options: {} = {}): Plugin {
|
||||
enforce: 'pre' as 'pre',
|
||||
apply: 'serve' as 'serve',
|
||||
configureServer(server) {
|
||||
// examples/index 页面，不处理会直接吐出 html 文件
|
||||
server.middlewares.use('/examples/index', async (req, res, next) => {
|
||||
if (req.originalUrl !== '/examples/index') {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
let template = fs.readFileSync(
|
||||
path.resolve(__dirname, '../index.html'),
|
||||
'utf-8'
|
||||
);
|
||||
template = await server.transformIndexHtml('/index.html', template);
|
||||
res.statusCode = 200;
|
||||
res.end(template);
|
||||
});
|
||||
|
||||
server.middlewares.use('/api', (req, res, next) => {
|
||||
initExpress(req, res, next, () => {
|
||||
handler(req, res);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user