Action
Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
{
"label": "弹个框",
"type": "button",
"level": "dark",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "这是个简单的弹框。"
}
}
除了能弹框，它还能设定很多行为比如：提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。
通用配置项
所有actionType都支持的通用配置项
| 属性名 |
类型 |
默认值 |
说明 |
| type |
string |
action |
指定为 Page 渲染器。 |
| actionType |
string |
- |
【必填】这是action最核心的配置，来指定该action的作用类型，支持：ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。 |
| label |
string |
- |
按钮文本。可用 ${xxx} 取值。 |
| level |
string |
default |
按钮样式，支持：link、primary、secondary、info、success、warning、danger、light、dark、default。 |
| size |
string |
- |
按钮大小，支持：xs、sm、md、lg。 |
| icon |
string |
- |
设置图标，例如fa fa-plus。 |
| iconClassName |
string |
- |
给图标上添加类名。 |
| active |
boolean |
- |
按钮是否高亮。 |
| activeLevel |
string |
- |
按钮高亮时的样式，配置支持同level。 |
| activeClassName |
string |
is-active |
给按钮高亮添加类名。 |
| block |
boolean |
- |
用display:"block"来显示按钮。 |
| confirmText |
string |
- |
当设置后，操作在开始前会询问用户。可用 ${xxx} 取值。 |
| reload |
string |
- |
指定此次操作完后，需要刷新的目标组件名字（组件的name值，自己配置的），多个请用 , 号隔开。 |
| tooltip |
string |
- |
鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 |
| disabledTip |
string |
- |
被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 |
| tooltipPlacement |
string |
top |
如果配置了tooltip或者disabledTip，指定提示信息位置，可配置top、bottom、left、right。 |
| close |
boolean |
- |
当action配置在dialog或drawer的actions中时，配置为true指定此次操作完后关闭当前dialog或drawer。 |
| required |
Array<string> |
- |
配置字符串数组，指定在form中进行操作之前，需要指定的字段名的表单项通过验证 |
下面会分别介绍每种类型的Action配置项
ajax
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
ajax |
发送请求 |
| api |
string 或 ApiObject |
- |
请求地址，参考 api 格式说明。 |
| redirect |
string |
- |
指定当前请求结束后跳转的路径，可用 ${xxx} 取值。 |
| feedback |
DialogObject |
- |
如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog |
| messages |
object |
- |
success：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。failed：ajax 操作失败提示。 |
{
"data": {
"user": "no one"
},
"body": {
"label": "Post",
"type": "button",
"actionType": "ajax",
"confirmText": "确定？",
"api": "/api/mock2/form/saveForm",
"messages": {
"success": "发送成功"
}
}
}
link
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
link |
单页跳转 |
| link |
string |
link |
用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 ${xxx} 取值。 |
{
"body": {
"label": "进入简介页面",
"type": "button",
"level": "info",
"actionType": "link",
"link": "/docs/index"
}
}
url
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
url |
页面跳转 |
| url |
string |
- |
按钮点击后，会打开指定页面。可用 ${xxx} 取值。 |
| blank |
boolean |
false |
如果为 true 将在新tab页面打开。 |
{
"body": {
"label": "打开 Baidu",
"type": "button",
"level": "success",
"actionType": "url",
"url": "raw:http://www.baidu.com"
}
}
注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com
dialog
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
dialog |
点击后显示一个弹出框 |
| dialog |
string 或 DialogObject |
- |
指定弹框内容，格式可参考Dialog |
| nextCondition |
boolean |
- |
可以用来设置下一条数据的条件，默认为 true。 |
{
"body": {
"label": "Dialog Form",
"type": "button",
"level": "primary",
"actionType": "dialog",
"dialog": {
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
drawer
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
drawer |
点击后显示一个侧边栏 |
| drawer |
string 或 DrawerObject |
- |
指定弹框内容，格式可参考Drawer |
{
"body": {
"label": "Drawer Form",
"type": "button",
"level": "primary",
"actionType": "drawer",
"drawer": {
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
copy
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
copy |
复制一段内容到粘贴板 |
| content |
string |
- |
指定复制的内容。可用 ${xxx} 取值。 |
reload
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
reload |
刷新目标组件 |
| target |
string |
- |
需要刷新的目标组件名字（组件的name值，自己配置的），多个请用 , 号隔开。 |
add
该actionType为FormItem-Table专用
| 属性名 |
类型 |
默认值 |
说明 |
| actionType |
string |
add |
给指定FormItem-Table添加一条数据， |
| target |
string |
- |
指定FormItem-Table的名字（Table的name值），多个请用 , 号隔开。 |
