行为按钮 action （仅是对click事件的处理）
actionType：这是 action 最核心的配置，来指定该 action 的作用类型，支持：ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。
Button的本质就是一个Action 行为按钮。
1. 按钮集合 actions
"actions": [ //按钮集合 有的组件中是叫"buttons": [
{
"label": "上传${model}",
"type": "button",
"level": "link",
"id": "u:f73c31f82206",
"api": {
"method": "post",
"url": "/lb.wind/api/Device/upload/model/file",
"data": {
"serial": "${serial}",
"file": "${name}",
"model": "${model}"
}
},
"actionType": "ajax",
"className": "m-l-lg"
}
]2.action 还可以使用 body 来渲染其他组件，让那些不支持行为的组件支持点击事件，比如下面的例子
{
"type": "action",
"body": {
"type": "image",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
},
"tooltip": "点击会有弹框",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "这是个简单的弹框。"
}
}3.onClick定义点击事件，里面提供了event和props对象. props 可以拿到这个组件的其他属性，同时还能调用 amis 中的内部方法,数据在props.data中。event 就是 React 的事件。
{
"label": "点击",
"type": "button",
"onClick": "props.onAction(event, {
"actionType": "ajax",
"api": {
"method": "PATCH",
"url": "/lb.iot/api/DeviceTree/"+m.id,
"data": m,
}
});
"
}4.自定义组件使用Action(button)行为按钮：
onMount: (dom, data, onChange, props) => {
const button = document.createElement('button');
button.innerText = '点击修改姓名';
button.onclick = event => {
onChange('new name', 'name');
props.onAction( //详见amis/src/renderes/Action.tsx
event,
{
type: 'action',
label: '弹个框',
actionType: 'dialog',
dialog: {
title: '弹框',
body: 'Hello World!'
}
},
{} // 这是 data
);
event.preventDefault();
};
dom.appendChild(button);
};事件动作（onEvent属性 支持多种事件配置）
通过onEvent属性实现渲染器事件与响应动作的绑定。onEvent内配置事件和动作映射关系，actions属性是事件对应的响应动作的集合.
actions中动作都是按顺序一个个执行的。
事件包含渲染器事件和广播事件。
• 渲染器事件，由具体的渲染器组件提供，每个渲染器组件暴露的事件可以查看amis组件文档的事件表； 比如 button按钮的click事件 select的change事件等
• 广播事件，即自定义事件，可以自定义派发的事件名称eventName(通过广播动作触发)，其他渲染器可以监听该自定义事件并配置响应动作。
action动作包含通用动作、组件动作、广播动作、自定义动作，可以通过配置actionType来指定具体执行什么动作。
1.通用动作：包含发送 http 请求、跳转链接、浏览器回退、浏览器刷新、打开/关闭弹窗、打开/关闭抽屉、打开对话框、弹出 Toast 提示、复制、发送邮件、刷新、控制显示隐藏、控制启用禁用状态、设置数据.
ps: 发送请求(ajax)动作 "silent": true 或者 msg为空字符串时不会提示message(推荐设置slient,否则responseResult无法映射msg进去)。
另外动作中ajax请求比较简单无spinner加载动画和遮罩(可自行增加spinner实现遮罩 {"type": "spinner", "overlay": true, "showOn": "this.showSpinner"})
比如：setValue动作使用(组件中传递的参数是value, args: {value: {age:17} })
{
"type": "form",
"title": "表单",
"body": [
{
"label": "文本框",
"type": "input-text",
"name": "text",
"id": "u:fdd256b622e0"
}
],
"id": "u:c123bdb1db9e",
"debug": true
}
"onEvent": {
"click": {
"actions": [
{
"componentId": "u:c123bdb1db9e", //设置到form中
"expression": "!this.event.data.lock", //动作触发判断条件
"args": {
"value": "${event.data}" //此组件数据域(event.data)中数据全部传入.
},
"actionType": "setValue"
}
],
"weight": 0
}
}2.组件动作：是一些组件特有动作。
比如：触发tabs组件的changeActiveKey动作,修改激活的tab值
{
"type": "button",
"label": "更新",
"level": "primary",
"className": "mt-2 mb-2",
"onEvent": {
"click": {
"actions": [
{
"actionType": "changeActiveKey",
"componentId": “tabs”,
"args": {
"activeKey": 1
}
}
]
}
}
},3.广播动作：通过配置actionType: 'broadcast'和eventName实现触发一个广播，可以通过配置动作执行优先级weight来控制所有监听者的动作执行顺序。(event action)
//点击按钮触发 广播参数事件
{
"type": "button",
"id": "u:f360e41ffe34",
"name": "role",
"onEvent": {
"click": {
"actions": [
{
"actionType": "broadcast",
"eventName": "broadcast_1", //广播参数
"args": {
"age": 18
}
}
]
}
}
}//监听广播事件 并触发form的reload或setValue动作.
{
"type": "form",
"name": "sub-form1",
"onEvent": {
"broadcast_1": {
"actions": [
// {
// "actionType": "reload",
// "args": {
// "myname": "${event.data.age}"
// }
// },
{ //设置input-text组件的value值
"actionType": "setValue",
"componentId":"u:4b27eefc1f18",
"args": {
"value": "${event.data.age}"
}
},
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "表单1刷新完成"
}
}
]
}
},
"body": [
{
"type": "input-text",
"label": "昵称",
"name": "myname",
"disabled": false,
"mode": "horizontal",
"id": "u:4b27eefc1f18"
}
]
}4.自定义动作： 自定义js写动作
1.动作执行函数doAction，可以执行所有类型的动作
2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性
3.事件对象event，event.data 获取数据域中数据，在doAction之后执行event.stopPropagation = true;可以阻止后续动作执行
比如： {
"actionType": "custom",
"script": "\n console.log(context.props, event);\n doAction({\n actionType: 'setValue', \n componentId: 'u:c123bdb1db9e', \n args: {value: {age:17} } \n}); \n"
}