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 |
feedback.visibleOn |
string |
- |
可以用来配置 feedback 弹框出现的条件。 |
feedback.skipRestOnCancel |
boolean |
- |
如果配置了,在 feedback 弹窗里面,如果用户点了取消,那么这个按钮的其他动作也不做了。 |
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 值),多个请用 , 号隔开。 |