mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 11:07:52 +08:00
65ac422ed6
* 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
7.2 KiB
Executable File
7.2 KiB
Executable File
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| Static 静态展示 | 0 | null | Static 静态展示 | 52 |
用来在表单中，展示静态数据
基本用法
{
"type": "form",
"body": [
{
"name": "static",
"type": "static",
"label": "静态展示",
"value": "aaa"
}
]
}
数据域变量映射
除了显式配置value属性，来展示数据以外，支持通过配置name属性，来自动映射数据域中的相关变量
{
"type": "form",
"body": [
{
"type": "select",
"name": "select",
"label": "select",
"options": [
{
"label":"A",
"value":"a"
},
{
"label":"B",
"value":"b"
},
{
"label":"C",
"value":"c"
}
]
},
{
"type": "static",
"name": "select",
"label": "选中的值是"
}
]
}
展示其他组件
支持通过配置type为static-xxx的形式，展示其他 非表单项 组件，例如：
{
"type": "form",
"body": [
{
"type": "static-json",
"name": "json",
"label": "静态展示JSON",
"value": {
"a": "aaa",
"b": "bbb"
}
}
]
}
理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：
{
"type": "form",
"data": {
"id": 1,
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg",
"images": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg"
},
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg"
},
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg"
},
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg"
},
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg"
}
]
},
"api": "/api/mock2/saveForm?waitSeconds=2",
"title": "表单项静态展示",
"mode": "horizontal",
"body": [
{
"type": "static",
"label": "文本",
"value": "文本"
},
{
"type": "divider"
},
{
"type": "static-tpl",
"label": "模板",
"tpl": "自己拼接 HTML 取变量 \\${id}: ${id}"
},
{
"type": "divider"
},
{
"type": "static-date",
"label": "日期",
"value": 1593327764
},
{
"type": "divider"
},
{
"type": "static-datetime",
"label": "日期时间",
"value": 1593327764
},
{
"type": "divider"
},
{
"type": "static-mapping",
"label": "映射",
"value": 2,
"map": {
"0": "<span class='label label-info'>一</span>",
"1": "<span class='label label-success'>二</span>",
"2": "<span class='label label-danger'>三</span>",
"3": "<span class='label label-warning'>四</span>",
"4": "<span class='label label-primary'>五</span>",
"*": "<span class='label label-default'>-</span>"
}
},
{
"type": "divider"
},
{
"type": "static-progress",
"label": "进度",
"value": 66.66
},
{
"type": "divider"
},
{
"type": "static-image",
"label": "图片",
"name": "image",
"thumbMode": "cover",
"thumbRatio": "4:3",
"title": "233",
"imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda",
"popOver": {
"title": "查看大图",
"body": "<div class=\"w-xxl\"><img class=\"w-full\" src=\"${image}\"/></div>"
}
},
{
"type": "divider"
},
{
"type": "static-image",
"label": "图片自带放大",
"name": "image",
"thumbMode": "cover",
"thumbRatio": "4:3",
"title": "233",
"imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda",
"enlargeAble": true,
"originalSrc": "${image}"
},
{
"type": "static-images",
"label": "图片集",
"name": "images",
"thumbMode": "cover",
"thumbRatio": "4:3",
"enlargeAble": true,
"originalSrc": "${src}"
},
{
"type": "divider"
},
{
"type": "static-json",
"label": "JSON",
"value": {
"a": 1,
"b": 2,
"c": {
"d": 3
}
}
},
{
"type": "divider"
},
{
"type": "static",
"label": "可复制",
"value": "文本",
"copyable": {
"content": "内容，支持变量 ${id}"
}
},
{
"type": "divider"
},
{
"type": "static",
"name": "text",
"label": "可快速编辑",
"value": "文本",
"quickEdit": true
}
]
}
想要调整展示组件的配置，请查阅相应组件的文档。
快速编辑
通过 quickEdit 开启快速编辑功能，比如
{
"type": "form",
"body": [
{
"name": "static",
"type": "static",
"label": "静态展示",
"value": "aaa",
"quickEdit": {
"type": "number"
}
}
]
}
其他配置项参考 快速编辑