mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
文档优化
This commit is contained in:
liaoxuezhi
parent
54ef5a5c18
commit
f9d320492f
@ -173,9 +173,11 @@ module.exports = function(content, file) {
|
||||
return placeholder[id] || "";
|
||||
});
|
||||
|
||||
content = fis.compile.partial(content, file, "html");
|
||||
content = fis.compile.partial(content, file, "html") + `\n\n<div class="m-t-lg b-l b-info b-3x wrapper bg-light dk">文档内容有误？欢迎大家一起来编写，文档地址：<i class="fa fa-github"></i><a href="https://github.com/baidu/amis/tree/master${file.subpath}">${file.subpath}</a>。</div>`;
|
||||
info.html = content;
|
||||
info.toc = toc;
|
||||
|
||||
|
||||
|
||||
return "module.exports = " + JSON.stringify(info, null, 2) + ";";
|
||||
};
|
||||
|
||||
@ -12,8 +12,8 @@ shortname: advanced
|
||||
那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：
|
||||
|
||||
- `page` 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。
|
||||
- `amisPage` 当前页面的数据信息，包含标题，id，key 之类的信息。
|
||||
- `amisUser` 当前用户信息，包含邮箱和用户名信息。
|
||||
- `amisPage` 当前页面的数据信息，包含标题，id，key 之类的信息。`注意：平台中使用才有此变量。`
|
||||
- `amisUser` 当前用户信息，包含邮箱和用户名信息。`注意：平台中使用才有此变量。`
|
||||
- `params 中的数据` 如果地址栏中也携带了参数，也会 merge 到该层的数据中。
|
||||
- `initApi 返回的数据` 如果 page 设置了 `initApi` 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。
|
||||
- `crud`
|
||||
@ -94,7 +94,7 @@ shortname: advanced
|
||||
]
|
||||
```
|
||||
|
||||
### 选项联动
|
||||
### 数据联动
|
||||
|
||||
比如 select 中 options 可能根据某个值不同而不同。
|
||||
|
||||
@ -176,9 +176,9 @@ shortname: advanced
|
||||
|
||||
另外注意 button 的 target 值，正好是这个 form 的 name 值 `lidong` 的 formItem 的 name 值 `select`。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。
|
||||
|
||||
### 数据联动
|
||||
### 组件间通信
|
||||
|
||||
Form 和 CRUD, CRUD 有个 filter 配置项，里面可以配置表单项，当他提交时 CRUD 自动就会携带接受到的表单数据然后重新获取数据。有个限制，就是 CRUD 和 filter 必须放在一起，不能分开，实际上完全可以分开，只要 Form 的 target 是 CRUD 的 name 值即可。
|
||||
CRUD 有个 filter 配置项，里面可以配置表单项，当他提交时 CRUD 自动就会携带接受到的表单数据然后重新获取数据。有个限制，就是 CRUD 和 filter 必须放在一起，不能分开，实际上完全可以分开，只要 Form 的 target 是 CRUD 的 name 值即可。
|
||||
|
||||
```schema:height="300"
|
||||
{
|
||||
|
||||
@ -1,43 +1,56 @@
|
||||
### Service(FormItem)
|
||||
|
||||
目前看到的配置方式都是静态配置，如果你想动态配置，即配置项由接口决定，那么就使用此渲染器。
|
||||
请先参考Form外的[Service](../Service.md)用法。作为 FormItem 使用时最大的不同在于作为容器渲染器，他的孩子是优先用表单项还是非表单项。比如放置一个 `{type: 'text'}`，是渲染一个文本输入框、还是一个文本展示？
|
||||
|
||||
- `type` 请设置成 `service`。
|
||||
- `api` 数据接口
|
||||
- `initFetch` 初始是否拉取
|
||||
- `schemaApi` 配置接口，即由接口返回内容区的配置信息。
|
||||
正常期待返回是一个渲染器的配置如：
|
||||
两种都存在可能，所以作为表单项的 Service, 有两种用法，当把孩子节点放在 `controls` 里面时输出表单项，如果放在 `body` 底下时输出非表单项。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "这是内容。"
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "text",
|
||||
"text": "现在是：${date}"
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
但是，由于是在 form 里面，支持返回
|
||||
如果把子节点放在 `controls` 就输出表单项如：
|
||||
|
||||
```json
|
||||
{
|
||||
"controls": [
|
||||
// 表单项配置
|
||||
]
|
||||
}
|
||||
```
|
||||
```schema:height="500" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "文本输入",
|
||||
"name": "a"
|
||||
},
|
||||
|
||||
- `initFetchSchema` 是否初始拉取配置接口。
|
||||
- `name` 取个名字方便别的组件与之交互。比如某个按钮的 target 设置成次 name, 则会触发重新拉取。
|
||||
- `body` 内容容器，如果配置 schemaApi 则不需要配置，否则不配置的话，就没有内容展现。
|
||||
{
|
||||
"type": "date",
|
||||
"label": "日期",
|
||||
"name": "date",
|
||||
"format": "YYYY-MM-DD"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
从上面的栗子还可以发现，表单项的值是由 service 的 api 拉取过来的，也就是说，你可以利用 service 实现动态拉取部分表单项数据。
|
||||
|
||||
比如：
|
||||
|
||||
```schema:height="500" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "tpl",
|
||||
"label": "数据模板",
|
||||
"type": "select",
|
||||
"label": "模板",
|
||||
"inline": true,
|
||||
"required": true,
|
||||
"labelClassName": "text-muted",
|
||||
"name": "tpl",
|
||||
"value": "tpl1",
|
||||
"inline": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "模板1",
|
||||
@ -51,13 +64,146 @@
|
||||
"label": "模板3",
|
||||
"value": "tpl3"
|
||||
}
|
||||
],
|
||||
"description": "<span class=\"text-danger\">请修改这里看效果</span>"
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/form/initData?tpl=${tpl}",
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
注意：为什么修改数据模板的时候会自动让下面的 service 重新拉取数据？因为 service 的 api 是 `/api/mock2/form/initData?tpl=${tpl}`，amis 有个机制就是，当 api 地址值发生变化时就会重新拉取，当修改数据模板的时候，form 底下 tpl 变量会发生改变，然后会导致 api 的计算结果发生变化，然后会让 service 重新拉取。 那怎样不自动拉取？换种写法就行，比如把上面的 api 换成 `{method: "get", url: "/api/mock2/form/initData", data: {tpl: "${tpl}"}}` 这种写法就不会自动刷新了，因为 `/api/mock2/form/initData` 是一个不会发生变化的值了。更多内容请查看[联动说明](../../advanced.md#数据联动)
|
||||
|
||||
有时候自动拉取触发会比较频繁，所以有时候需要用到手动刷新，注意看以下的配置。
|
||||
|
||||
```schema:height="500" scope="form"
|
||||
[
|
||||
{
|
||||
"label": "数据模板",
|
||||
"type": "group",
|
||||
"labelClassName": "text-muted",
|
||||
"controls": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "tpl",
|
||||
"value": "tpl1",
|
||||
"mode": "inline",
|
||||
"options": [
|
||||
{
|
||||
"label": "模板1",
|
||||
"value": "tpl1"
|
||||
},
|
||||
{
|
||||
"label": "模板2",
|
||||
"value": "tpl2"
|
||||
},
|
||||
{
|
||||
"label": "模板3",
|
||||
"value": "tpl3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "获取",
|
||||
"mode": "inline",
|
||||
"className": "p-l-none",
|
||||
"actionType": "reload",
|
||||
"target": "servcieName"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"className": "m-t",
|
||||
"initFetchSchemaOn": "data.tpl",
|
||||
"schemaApi": "/api/mock2/service/form?tpl=$tpl"
|
||||
"name": "servcieName",
|
||||
"api": {
|
||||
"method": "get",
|
||||
"url": "/api/mock2/form/initData",
|
||||
"data": {
|
||||
"tpl": "${tpl}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
以上的栗子都是数据拉取，接下来要介绍 service 的另外一个重要功能，就是用它来拉取动态配置项。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=tabs"
|
||||
}
|
||||
```
|
||||
|
||||
你会发现上面的栗子其实并不是拉取的表单项，如果想直接渲染表单项，请返回这种格式
|
||||
|
||||
```js
|
||||
{
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "a",
|
||||
label: "文本输入"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
比如
|
||||
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=controls"
|
||||
}
|
||||
```
|
||||
|
||||
`schemaApi` 同样支持上面的联动用法。
|
||||
|
||||
@ -102,7 +102,7 @@ Api 类型可以是字符串或者对象。API 中可以直接设置数据发送
|
||||
}
|
||||
```
|
||||
|
||||
如果目标变量是数组，而发送的数据，有不希望把成员全部发送过去，可以这样配置。
|
||||
如果目标变量是数组，而发送的数据，又不希望把成员全部发送过去，可以这样配置。
|
||||
|
||||
```json
|
||||
{
|
||||
@ -121,6 +121,18 @@ Api 类型可以是字符串或者对象。API 中可以直接设置数据发送
|
||||
|
||||
如果 \$rows 的结构为 `[{a: 1, b: 2, c: 3, d: 4}, {a: 1, b: 2, c: 3, d: 4}]`, 经过上述映射后，实际发送的数据为 `{all: [{a: 1, b:2}, {a: 1, b: 2}]}`
|
||||
|
||||
如果你觉得上面的这种写法比较诡异，建议你用以下写法。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"all": "${rows|pick:a,b}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
** 注意 **
|
||||
|
||||
amis 所有值为 url 的如： `"http://www.baidu.com"` 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： `"raw:http://www.baidu.com"`。还有为了安全，amis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如：`"external:http://www.baidu.com"`
|
||||
|
||||
@ -144,7 +144,7 @@ export default function(doc) {
|
||||
const {location} = this.props;
|
||||
|
||||
return (
|
||||
<div className="pos-rlt">
|
||||
<div className="pos-rlt text-left">
|
||||
{doc.title ? (<TitleBar title={doc.title} />) : null}
|
||||
<div className="markdown-body" ref={this.divRef}>Doc</div>
|
||||
{doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
|
||||
|
||||
@ -12,12 +12,11 @@
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
/*max-width: 980px;*/
|
||||
margin: 0 auto;
|
||||
padding: 25px 45px 45px;
|
||||
max-width: 980px;
|
||||
/* margin: 0 auto; */
|
||||
padding: 25px 45px 25px;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
padding: 0 45px;
|
||||
left: 0!important;
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
@ -40,7 +40,7 @@ fis.match('/docs/**.md', {
|
||||
rExt: 'js',
|
||||
parser: [parserMarkdown, function(contents, file) {
|
||||
return contents.replace(/\bhref=\\('|")(.+?)\\\1/g, function(_, quota, link) {
|
||||
if (/\.md($|#)/.test(link)) {
|
||||
if (/\.md($|#)/.test(link) && !/^https?\:/.test(link)) {
|
||||
let parts = link.split('#');
|
||||
parts[0] = parts[0].replace('.md', '');
|
||||
|
||||
@ -237,7 +237,7 @@ if (fis.project.currentMedia() === 'publish') {
|
||||
useHash: true,
|
||||
parser: [parserMarkdown, function(contents, file) {
|
||||
return contents.replace(/\bhref=\\('|")(.+?)\\\1/g, function(_, quota, link) {
|
||||
if (/\.md($|#)/.test(link)) {
|
||||
if (/\.md($|#)/.test(link) && !/^https?\:/.test(link)) {
|
||||
let parts = link.split('#');
|
||||
parts[0] = parts[0].replace('.md', '');
|
||||
|
||||
|
||||
@ -284,6 +284,28 @@ const predefined = {
|
||||
body: '卡片B内容'
|
||||
}
|
||||
]
|
||||
},
|
||||
controls: {
|
||||
controls: [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -106,5 +106,5 @@
|
||||
}
|
||||
},
|
||||
"min_indexed_level": 0,
|
||||
"nb_hits": 1165
|
||||
"nb_hits": 1224
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user