2022-03-15 13:40:02 +08:00
|
|
|
|
---
|
|
|
|
|
title: 事件动作
|
|
|
|
|
description: 事件动作
|
|
|
|
|
type: 0
|
|
|
|
|
group: 💡 概念
|
|
|
|
|
menuName: 事件动作
|
|
|
|
|
icon:
|
|
|
|
|
order: 9
|
|
|
|
|
---
|
|
|
|
|
|
2022-03-15 16:17:01 +08:00
|
|
|
|
> 1.7.0 及以上版本
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
上一节我们介绍了如何实现联动,是比较基础和局限的,而事件动作是更简单、更灵活、更高级的用法,可以解决复杂的 UI 交互场景,支持渲染器事件监听和响应设计,无需关心组件层级关系。例如:
|
|
|
|
|
|
|
|
|
|
- 传递数据
|
|
|
|
|
- 点击「按钮」,发送一个远程请求,返回的数据回填给一个表单
|
|
|
|
|
- 弹窗提交后,将弹窗内表单数据回填给另一个表单
|
|
|
|
|
- 联动刷新
|
|
|
|
|
- 下拉选择不同项,联动刷新表单数据
|
|
|
|
|
- 状态控制
|
|
|
|
|
- 勾选不同按钮,控制相应组件的显示/隐藏
|
|
|
|
|
- 勾选不同按钮,控制相应组件的启用/禁用
|
|
|
|
|
- 多个组件监听同一个事件做出不同响应
|
|
|
|
|
- 下拉选择不同项,组件 A 监听后发送一个远程请求,组件 B 监听后进行刷新
|
|
|
|
|
- 逻辑编排
|
|
|
|
|
- 针对监听到的事件,循环执行一些动作作为响应,还可以控制循环跳出或跳过
|
|
|
|
|
- 针对监听到的事件,根据条件选择性的执行动作响应
|
|
|
|
|
- 针对监听到的事件,并行执行多个动作作为响应
|
2022-03-30 21:30:20 +08:00
|
|
|
|
- 执行完当前动作后,可以选择是否继续执行后续动作,是否关闭事件默认行为的执行
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
## 基本使用
|
|
|
|
|
|
|
|
|
|
通过`onEvent`属性实现渲染器事件与响应动作的绑定。`onEvent`内配置事件和动作映射关系,`actions`是事件对应的响应动作的集合。
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"id": "u:0335af8e2c85",
|
|
|
|
|
"debug": true,
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "a",
|
|
|
|
|
"label": "Text",
|
|
|
|
|
"id": "u:46bd639522ef",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"change": {
|
|
|
|
|
"weight": 0,
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"args": {
|
|
|
|
|
"msgType": "info",
|
|
|
|
|
"position": "top-right",
|
|
|
|
|
"closeButton": true,
|
|
|
|
|
"showIcon": true,
|
|
|
|
|
"msg": "${title}"
|
|
|
|
|
},
|
|
|
|
|
"actionType": "toast"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "combo",
|
|
|
|
|
"label": "组合输入",
|
|
|
|
|
"name": "combo",
|
|
|
|
|
"multiple": true,
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "input-text",
|
|
|
|
|
"placeholder": "文本"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "select",
|
|
|
|
|
"name": "select",
|
|
|
|
|
"placeholder": "选项",
|
|
|
|
|
"options": [
|
|
|
|
|
{
|
|
|
|
|
"label": "A",
|
|
|
|
|
"value": "a"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "B",
|
|
|
|
|
"value": "b"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"id": "u:f38229b297b3"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "提交追加",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:b867983767c7",
|
|
|
|
|
"actionType": "reload",
|
|
|
|
|
"data": null
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"id": "u:d2848e10089e"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"data": {
|
|
|
|
|
"a1": 1
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"actionType": "reload",
|
|
|
|
|
"componentId": "u:b867983767c7",
|
|
|
|
|
"dataMergeMode": "merge",
|
|
|
|
|
"args": {}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:f38229b297b3",
|
|
|
|
|
"args": {
|
|
|
|
|
"value": {
|
|
|
|
|
"a": "a"
|
|
|
|
|
},
|
|
|
|
|
"index": 1
|
|
|
|
|
},
|
|
|
|
|
"actionType": "setValue"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"id": "u:8352c48c7f70"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"title": "表单",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"label": "文本框",
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "text",
|
|
|
|
|
"id": "u:ae2fecf044e4"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"id": "u:4a2b577a409b"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "crud",
|
|
|
|
|
"syncLocation": false,
|
|
|
|
|
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"name": "id",
|
|
|
|
|
"label": "ID",
|
|
|
|
|
"id": "u:afb38982f4bc"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "engine",
|
|
|
|
|
"label": "Rendering engine",
|
|
|
|
|
"id": "u:85dac2ef8454"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "browser",
|
|
|
|
|
"label": "Browser",
|
|
|
|
|
"id": "u:5262429efaae"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "platform",
|
|
|
|
|
"label": "Platform(s)",
|
|
|
|
|
"id": "u:f37e19b9a1d4"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "version",
|
|
|
|
|
"label": "Engine version",
|
|
|
|
|
"id": "u:fca3187df212"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "grade",
|
|
|
|
|
"label": "CSS grade",
|
|
|
|
|
"id": "u:87a0625d1fa9"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "operation",
|
|
|
|
|
"label": "操作",
|
|
|
|
|
"buttons": [
|
|
|
|
|
{
|
|
|
|
|
"label": "详情",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"level": "link",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "查看详情",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "form",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "engine",
|
|
|
|
|
"label": "Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "browser",
|
|
|
|
|
"label": "Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "platform",
|
|
|
|
|
"label": "platform"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "version",
|
|
|
|
|
"label": "version"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "control",
|
|
|
|
|
"label": "grade",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "tag",
|
|
|
|
|
"label": "${grade}",
|
|
|
|
|
"displayMode": "normal",
|
|
|
|
|
"color": "active"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"id": "u:0fca1d0e0ca5"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"level": "link",
|
|
|
|
|
"className": "text-danger",
|
|
|
|
|
"disabledOn": "this.grade === 'A'",
|
|
|
|
|
"id": "u:e32767bcac28"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"id": "u:6972bab49c8c"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"id": "u:b867983767c7"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"id": "u:71d9fc8c48e2",
|
|
|
|
|
"title": "Simple Form Page",
|
|
|
|
|
"regions": [
|
|
|
|
|
"body"
|
|
|
|
|
],
|
|
|
|
|
"pullRefresh": {
|
|
|
|
|
"disabled": true
|
|
|
|
|
},
|
|
|
|
|
"data": {
|
|
|
|
|
"a22": 2222
|
|
|
|
|
},
|
|
|
|
|
"asideResizor": false,
|
|
|
|
|
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
label: '尝试点击、鼠标移入/移出',
|
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '派发点击事件'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
mouseenter: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '派发鼠标移入事件'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
mouseleave: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '派发鼠标移出事件'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 事件与动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-31 15:05:54 +08:00
|
|
|
|
事件包含`渲染器事件`和`广播事件`,监听这些事件时,可以通过`event.data`来获取事件对象的数据。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
- 渲染器事件,由具体的渲染器组件提供,每个渲染器组件暴露的事件可以查看具体的[组件文档的事件表](../../components/page#事件表);
|
2022-03-15 13:40:02 +08:00
|
|
|
|
- 广播事件,即自定义事件,可以自定义派发的事件名称`eventName`,其他渲染器可以监听该自定义事件并配置响应动作。
|
|
|
|
|
|
|
|
|
|
动作包含`通用动作`、`组件动作`、`广播动作`、`自定义动作`,可以通过配置`actionType`来指定具体执行什么动作。
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 触发通用动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-04-26 21:12:00 +08:00
|
|
|
|
通用动作包含发送 http 请求、跳转链接、浏览器回退、浏览器刷新、打开/关闭弹窗、打开/关闭抽屉、打开对话框、弹出 Toast 提示、复制、发送邮件、刷新、控制显示隐藏、控制启用禁用状态、更新数据。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 发送 http 请求
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'ajax'`实现 http 请求发送,该动作需实现 `env.fetcher` 请求器。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
data: {
|
|
|
|
|
name: 'lll'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_001',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
label: '发送 Ajax 请求',
|
|
|
|
|
level: 'primary',
|
2022-06-07 21:27:34 +08:00
|
|
|
|
"confirmText": "确认要发出这个请求?",
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'ajax',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
api: {
|
|
|
|
|
url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?name=${name}',
|
|
|
|
|
method: 'get'
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
success: '成功了!欧耶',
|
|
|
|
|
failed: '失败了呢。。'
|
2022-10-18 16:26:13 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
age: 18
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-07-19 13:21:45 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-10-12 15:09:03 +08:00
|
|
|
|
expression: '${responseResult.responseStatus === 0}',
|
2022-07-19 13:21:45 +08:00
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
msg: '${responseResult|json}'
|
2022-07-19 13:21:45 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_001',
|
|
|
|
|
label: '发送 Ajax 请求(静默模式)',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
"confirmText": "确认要发出这个请求?",
|
|
|
|
|
className: 'm',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'ajax',
|
|
|
|
|
args: {
|
|
|
|
|
api: {
|
2022-10-18 16:26:13 +08:00
|
|
|
|
url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/initData',
|
|
|
|
|
method: 'post'
|
2022-07-19 13:21:45 +08:00
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
success: '成功了!欧耶',
|
|
|
|
|
failed: '失败了呢。。'
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
silent: true
|
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
age: 18
|
2022-07-19 13:21:45 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-10-12 15:09:03 +08:00
|
|
|
|
expression: '${responseResult.responseStatus === 0}',
|
2022-07-19 13:21:45 +08:00
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
msg: '${responseResult|json}'
|
2022-07-19 13:21:45 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------- | ----------------------------------- | ------ | ------------------------- |
|
|
|
|
|
| api | [API](../../../docs/types/api) | - | 接口配置 |
|
|
|
|
|
| options | `object` | - | 其他配置 |
|
|
|
|
|
| messages | `{success: string, failed: string}` | - | 请求成功/失败后的提示信息 |
|
|
|
|
|
|
|
|
|
|
**其他属性**
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | -------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| outputVar | `string` | - | 请求响应结果缓存在`responseResult`或`{outputVar}`(`< 2.3.2 及以下版本 为 event.data.responseResult`或`event.data.{outputVar}`)。 |
|
|
|
|
|
|
|
|
|
|
请求响应结果的结构如下:
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
// 状态码
|
|
|
|
|
"responseStatus": 0,
|
|
|
|
|
// 响应数据
|
|
|
|
|
"responseData": {
|
|
|
|
|
"xxx": "xxx"
|
|
|
|
|
},
|
|
|
|
|
// 响应消息
|
|
|
|
|
"responseMsg": "ok"
|
|
|
|
|
}
|
|
|
|
|
```
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 打开弹窗(模态)
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'dialog'`实现 Dialog 弹窗。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
label: '打开弹窗(模态)',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'dialog',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
args: {
|
|
|
|
|
dialog: {
|
|
|
|
|
type: 'dialog',
|
|
|
|
|
title: '模态弹窗',
|
|
|
|
|
id: 'dialog_001',
|
|
|
|
|
data: {
|
|
|
|
|
myage: '22'
|
2022-03-29 17:46:24 +08:00
|
|
|
|
},
|
2022-10-18 16:26:13 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
|
|
|
|
tpl: '<p>对,你打开了模态弹窗</p>',
|
|
|
|
|
inline: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'myname',
|
|
|
|
|
mode: 'horizontal',
|
|
|
|
|
onEvent: {
|
|
|
|
|
change: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'confirm',
|
|
|
|
|
componentId: 'dialog_001'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2022-04-13 18:28:08 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
],
|
|
|
|
|
onEvent: {
|
|
|
|
|
confirm: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: 'confirm'
|
|
|
|
|
}
|
2022-04-29 18:15:33 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
cancel: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: 'cancel'
|
|
|
|
|
}
|
2022-04-29 18:15:33 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
> `< 2.3.2 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | ----------------------- | ------ | --------------------------------------------------------- |
|
|
|
|
|
| dialog | `string`/`DialogObject` | - | 指定弹框内容,格式可参考[Dialog](../../components/dialog) |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 关闭弹窗(模态)
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
通过配置`actionType: 'closeDialog'`实现关闭当前弹窗;附加配置`componentId`可以实现关闭指定弹窗。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_003',
|
|
|
|
|
label: '打开弹窗(模态)',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'dialog',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
args: {
|
|
|
|
|
dialog: {
|
|
|
|
|
type: 'dialog',
|
|
|
|
|
id: 'dialog_002',
|
|
|
|
|
title: '模态弹窗',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '打开子弹窗,然后关闭它的父亲',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'dialog',
|
|
|
|
|
args: {
|
|
|
|
|
dialog: {
|
|
|
|
|
type: 'dialog',
|
|
|
|
|
title: '模态子弹窗',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '关闭指定弹窗(关闭父弹窗)',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'closeDialog',
|
|
|
|
|
componentId: 'dialog_002'
|
|
|
|
|
}
|
|
|
|
|
]
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '关闭当前弹窗',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'closeDialog'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------- |
|
|
|
|
|
| componentId | `string` | - | 指定弹框组件 id |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 打开抽屉(模态)
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'drawer'`实现 Drawer 抽屉打开。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_004',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
label: '打开抽屉(模态)',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'drawer',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
args: {
|
|
|
|
|
drawer: {
|
|
|
|
|
type: 'drawer',
|
|
|
|
|
title: '模态抽屉',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
|
|
|
|
tpl: '<p>对,你打开了模态抽屉</p>',
|
|
|
|
|
inline: false
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
onEvent: {
|
|
|
|
|
confirm: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: 'confirm'
|
|
|
|
|
}
|
2022-04-29 18:15:33 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
cancel: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: 'cancel'
|
|
|
|
|
}
|
2022-04-29 18:15:33 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-04-13 18:28:08 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 2.3.2 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | ----------------------- | ------ | --------------------------------------------------------- |
|
|
|
|
|
| drawer | `string`/`DrawerObject` | - | 指定弹框内容,格式可参考[Drawer](../../components/drawer) |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 关闭抽屉(模态)
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
通过配置`actionType: 'closeDrawer'`实现关闭当前抽屉;附加配置`componentId`可以实现关闭指定抽屉。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '打开抽屉(模态)',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'drawer',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
args: {
|
|
|
|
|
drawer: {
|
|
|
|
|
type: 'drawer',
|
|
|
|
|
id: 'drawer_1',
|
|
|
|
|
title: '模态抽屉',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '打开子抽屉,然后关闭它的父亲',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'drawer',
|
|
|
|
|
args: {
|
|
|
|
|
drawer: {
|
|
|
|
|
type: 'drawer',
|
|
|
|
|
title: '模态子抽屉',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '关闭指定抽屉(关闭父抽屉)',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'closeDrawer',
|
|
|
|
|
componentId: 'drawer_1'
|
|
|
|
|
}
|
|
|
|
|
]
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '关闭当前抽屉',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'closeDrawer'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-10-18 16:26:13 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------- |
|
|
|
|
|
| componentId | `string` | - | 指定抽屉组件 id |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 打开对话框
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-16 10:41:43 +08:00
|
|
|
|
通过配置`actionType: 'alert'`或`actionType: 'confirm'`打开不同对话框,该动作分别需实现 env.alert: (msg: string) => void 和 env.confirm: (msg: string, title?: string) => boolean | Promise<boolean>。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
#### 提示对话框
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
data: {
|
|
|
|
|
msg: '去吃饭了'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '提示对话框(模态)',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'alert',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msg: '<a href="http://www.baidu.com" target="_blank">${msg}~</a>'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | -------------- |
|
|
|
|
|
| msg | `string` | - | 对话框提示内容 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
#### 确认对话框
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
data: {
|
|
|
|
|
title: '操作确认',
|
|
|
|
|
msg: '要删除它吗?'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '确认对话框(模态)',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
2022-04-13 18:28:08 +08:00
|
|
|
|
actionType: 'confirmDialog',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
title: '${title}',
|
|
|
|
|
msg: '<span style="color:red">${msg}</span>'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | -------------- |
|
|
|
|
|
| title | `string` | - | 对话框标题 |
|
|
|
|
|
| msg | `string` | - | 对话框提示内容 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 跳转链接
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-16 10:41:43 +08:00
|
|
|
|
通过配置`actionType: 'url'`或`actionType: 'link'`实现链接跳转,该动作需实现 env.jumpTo(to: string, action?: any) => void 方法。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
#### 打开页面
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
2022-04-13 18:28:08 +08:00
|
|
|
|
data: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
myname: 'lvxj',
|
|
|
|
|
myjon: 'player'
|
2022-04-13 18:28:08 +08:00
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '百度一下',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'url',
|
2022-04-14 21:16:03 +08:00
|
|
|
|
args: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
url: 'http://www.baidu.com',
|
|
|
|
|
blank: true,
|
|
|
|
|
params: {
|
|
|
|
|
name: 'jack',
|
|
|
|
|
jon: '${myjon}'
|
|
|
|
|
},
|
2022-04-14 21:16:03 +08:00
|
|
|
|
name: '${myname}',
|
|
|
|
|
age: 18
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | --------- | ------- | ---------------------------------------------------------- |
|
|
|
|
|
| url | `string` | - | 按钮点击后,会打开指定页面。可用 `${xxx}` 取值 |
|
|
|
|
|
| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开 |
|
|
|
|
|
| params | `object` | - | 页面参数`{key:value}`,支持数据映射,`> 1.10.0 及以上版本` |
|
|
|
|
|
|
|
|
|
|
#### 打开单页
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
label: '跳转至「表达式」',
|
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'link',
|
2022-04-29 16:22:53 +08:00
|
|
|
|
args: {
|
|
|
|
|
link: './expression'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | ----------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| link | `string` | `link` | 用来指定跳转地址,跟 url 不同的是,这是单页跳转方式,不会渲染浏览器,请指定 amis 平台内的页面。可用 `${xxx}` 取值 |
|
|
|
|
|
| params | `object` | - | 页面参数`{key:value}`,支持数据映射,`> 1.9.0 及以上版本` |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 浏览器回退
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-03-21 14:14:08 +08:00
|
|
|
|
通过配置`actionType: 'goBack'`实现页面回退。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '回退',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-21 14:14:08 +08:00
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'goBack'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 前进/后退到指定页面
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-08-24 16:15:27 +08:00
|
|
|
|
通过配置`actionType: 'goPage'`实现浏览器页面的前进/后退。只有当历史记录中存在目标页面时才会生效。
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '后退到上上个页面',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-21 14:14:08 +08:00
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'goPage',
|
2022-08-24 16:15:27 +08:00
|
|
|
|
args: {
|
|
|
|
|
delta: -2
|
|
|
|
|
}
|
2022-03-21 14:14:08 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | ---- |
|
|
|
|
|
| delta | `string` | `0` | 位置 |
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 浏览器刷新
|
2022-03-21 14:14:08 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-03-21 14:14:08 +08:00
|
|
|
|
通过配置`actionType: 'refresh'`实现浏览器刷新。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '刷新页面',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-21 14:14:08 +08:00
|
|
|
|
className: 'ml-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'refresh'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### toast 提示
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'toast'`实现弹出 toast 提示,该动作需实现 env.notify(type: ToastLevel, msg: string, conf?: ToastConf) => void 方法。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '警告',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'warning',
|
|
|
|
|
className: 'mr-2 mb-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'warning',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '成功',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'success',
|
|
|
|
|
className: 'mr-2 mb-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '错误',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'danger',
|
|
|
|
|
className: 'mr-2 mb-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'error',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '提示',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'info',
|
|
|
|
|
className: 'mb-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
tpl: '<br>',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '左上',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mr-2 mt-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-left'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '中上',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mr-2 mt-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-center'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '右上',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mt-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2022-04-14 14:18:27 +08:00
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
|
|
|
|
tpl: '<br>',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '屏幕的中央',
|
|
|
|
|
className: 'ml-10 mt-2 mb-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'center'
|
|
|
|
|
}
|
2022-04-14 14:18:27 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
|
|
|
|
tpl: '<br>',
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '左下',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mr-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'bottom-left'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '中下',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mr-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'bottom-center'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '右下',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '我是全局警告消息,可以配置不同类型和弹出位置~',
|
|
|
|
|
position: 'bottom-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | --------- | --------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| msgType | `string` | `"info"` | 消息类型 `info\|success\|error\|warning` |
|
|
|
|
|
| msg | `string` | - | 消息内容 |
|
|
|
|
|
| position | `string` | `top-center(移动端为center)` | 提示显示位置 `top-right\|top-center\|top-left\|bottom-center\|bottom-left\|bottom-right\|center` |
|
|
|
|
|
| closeButton | `boolean` | `false` | 是否展示关闭按钮 |
|
|
|
|
|
| showIcon | `boolean` | `true` | 是否展示图标 |
|
|
|
|
|
| timeout | `number` | `5000(error类型为6000,移动端为3000)` | 持续时间 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 复制
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-04-14 14:18:27 +08:00
|
|
|
|
通过配置`actionType: 'copy'`和复制属性实现文本的复制操作,该动作需实现 env.copy(contents: string, options?: any) => void 方法。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '复制一段文本',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
|
|
|
|
className: 'mr-2',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'copy',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
content: 'http://www.baidu.com'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '复制一段富文本',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'copy',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
2022-05-16 10:41:43 +08:00
|
|
|
|
copyFormat: 'text/html',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
content: "<a href='http://www.baidu.com'>link</a> <b>bold</b>"
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------- | ------------------------------------ | ----------- | ---------------------------------- |
|
|
|
|
|
| copyFormat | `string` | `text/html` | 复制格式 |
|
|
|
|
|
| content | [模板](../../docs/concepts/template) | - | 指定复制的内容。可用 `${xxx}` 取值 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 发送邮件
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
通过配置`actionType: 'email'`和邮件属性实现发送邮件操作。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '发送邮件',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'email',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
to: 'amis@baidu.com',
|
|
|
|
|
cc: 'baidu@baidu.com',
|
|
|
|
|
subject: '这是邮件主题',
|
|
|
|
|
body: '这是邮件正文'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------- | -------- | ------ | ------------------------------ |
|
|
|
|
|
| to | `string` | - | 收件人邮箱,可用 ${xxx} 取值 |
|
|
|
|
|
| cc | `string` | - | 抄送邮箱,可用 ${xxx} 取值 |
|
|
|
|
|
| bcc | `string` | - | 匿名抄送邮箱,可用 ${xxx} 取值 |
|
|
|
|
|
| subject | `string` | - | 邮件主题,可用 ${xxx} 取值 |
|
|
|
|
|
| body | `string` | - | 邮件正文,可用 ${xxx} 取值 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 刷新
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
通过配置`actionType: 'reload'`实现对指定组件的刷新(重新加载)操作,仅支持`form`、`wizard`、`service`、`page`、`app`、`chart`、`crud`,以及支持动态数据的`输入类`组件,详见组件的`动作表`。更多示例请查看[刷新示例](../../../examples/action/reload/form)。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-04-26 21:12:00 +08:00
|
|
|
|
label: '刷新',
|
|
|
|
|
className: 'mb-2',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'reload',
|
|
|
|
|
componentId: 'form-reload'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2022-04-26 21:12:00 +08:00
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
id: 'form-reload',
|
|
|
|
|
name: 'form-reload',
|
|
|
|
|
initApi:
|
|
|
|
|
'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData',
|
|
|
|
|
title: '表单',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
id: 'date-input-01',
|
|
|
|
|
name: 'date',
|
|
|
|
|
label: '时间戳'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
**动作属性**
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | --------- | ------ | ------------------------------------------------------------------ |
|
|
|
|
|
| resetPage | `boolean` | true | 当目标组件为 `crud` 时,可以控制是否重置页码,`> 2.3.2 及以上版本` |
|
|
|
|
|
|
|
|
|
|
**其他属性**
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------------- |
|
|
|
|
|
| componentId | `string` | - | 指定刷新的目标组件 id |
|
2022-05-10 19:31:20 +08:00
|
|
|
|
|
|
|
|
|
### 显示与隐藏
|
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
通过配置`actionType: 'show'`或`'hidden'`实现对指定组件的显示和隐藏,且显隐动作的控制高于组件显隐属性的设置。
|
2022-04-26 21:12:00 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
label: '显示',
|
2022-04-26 21:12:00 +08:00
|
|
|
|
level: 'primary',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
className: 'mr-2',
|
2022-04-26 21:12:00 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
actionType: 'show',
|
|
|
|
|
componentId: 'input-text_001'
|
2022-04-26 21:12:00 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
label: '隐藏',
|
2022-04-26 21:12:00 +08:00
|
|
|
|
level: 'primary',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
actionType: 'hidden',
|
|
|
|
|
componentId: 'input-text_001'
|
2022-04-26 21:12:00 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '愿望',
|
|
|
|
|
className: 'mt-2',
|
|
|
|
|
id: 'input-text_001',
|
|
|
|
|
mode: 'horizontal',
|
|
|
|
|
hidden: true
|
|
|
|
|
}
|
2022-04-26 21:12:00 +08:00
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-05-10 19:31:20 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------------------- |
|
|
|
|
|
| componentId | `string` | - | 指定显示或隐藏的目标组件 id |
|
2022-05-10 19:31:20 +08:00
|
|
|
|
|
|
|
|
|
### 控制状态
|
2022-03-29 17:46:24 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
通过配置`actionType: 'enabled'`或`actionType: 'disabled'`实现对指定组件的启用和禁用,仅支持实现了状态控制功能的数据`输入类`组件。
|
2022-03-29 17:46:24 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_dis',
|
|
|
|
|
label: '禁用',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
className: 'mr-2 mb-2',
|
|
|
|
|
disabled: true,
|
2022-03-29 17:46:24 +08:00
|
|
|
|
onEvent: {
|
2022-05-10 19:31:20 +08:00
|
|
|
|
click: {
|
2022-03-29 17:46:24 +08:00
|
|
|
|
actions: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
actionType: 'disabled',
|
|
|
|
|
componentId: 'form_disable'
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'button',
|
|
|
|
|
label: '启用',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
className: 'mb-2',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
onEvent: {
|
2022-05-10 19:31:20 +08:00
|
|
|
|
click: {
|
2022-03-29 17:46:24 +08:00
|
|
|
|
actions: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
actionType: 'enabled',
|
|
|
|
|
componentId: 'form_disable'
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
id: 'form_disable',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
title: '表单',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'group',
|
|
|
|
|
body: [
|
2022-03-29 17:46:24 +08:00
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'button',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
label: '我的状态变了'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
label: '禁用上面的按钮',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'disabled',
|
|
|
|
|
componentId: 'b_dis'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
label: '启用用上面的按钮',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'enabled',
|
|
|
|
|
componentId: 'b_dis'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2022-04-20 15:20:42 +08:00
|
|
|
|
}
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2022-05-10 19:31:20 +08:00
|
|
|
|
]
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-05-10 19:31:20 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------------------- |
|
|
|
|
|
| componentId | `string` | - | 指定启用或禁用的目标组件 id |
|
2022-05-10 19:31:20 +08:00
|
|
|
|
|
|
|
|
|
### 更新数据
|
2022-03-29 17:46:24 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
> 1.8.0 及以上版本
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
更新数据即更新指定组件数据域中的数据(data),通过配置`actionType: 'setValue'`实现组件`数据域变量更新`,通过它可以实现`组件间联动更新`、`数据回填`,更多示例请查看[更新数据示例](../../../examples/action/setdata/form)。
|
|
|
|
|
|
|
|
|
|
**注意事项**
|
2022-08-03 17:55:39 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
- 数据类型支持范围:`基础类型`、`对象类型`、`数组类型`,数据类型取决于目标组件所需数据值类型
|
|
|
|
|
- 目标组件支持范围:`form`、`dialog`、`drawer`、`wizard`、`service`、`page`、`app`、`chart`,以及数据`输入类`组件
|
|
|
|
|
- < 2.3.2 及以下版本,虽然更新数据可以实现对组件数据域的更新,但如果更新数据动作的数据值来自前面的异步动作(例如 发送 http 请求、自定义 JS(异步)),则后面的动作只能通过事件变量`${event.data.xxx}`来获取异步动作产生的数据,无法通过当前数据域`${xxx}`直接获取更新后的数据。
|
2022-03-29 17:46:24 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
title: '更新表单数据',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
data: {
|
|
|
|
|
globalData: {
|
2022-05-10 19:31:20 +08:00
|
|
|
|
myrole: '法官',
|
|
|
|
|
mymsg: '该吃饭了!'
|
2022-03-29 17:46:24 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
body: [
|
2022-05-10 19:31:20 +08:00
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '更新',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
className: 'mb-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'setValue',
|
|
|
|
|
componentId: 'form_data',
|
|
|
|
|
args: {
|
|
|
|
|
value: '${globalData}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2022-03-29 17:46:24 +08:00
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
id: 'form_data',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
title: '表单',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
debug: true,
|
|
|
|
|
data: {
|
|
|
|
|
myrole: '预言家',
|
|
|
|
|
age: '18'
|
|
|
|
|
},
|
|
|
|
|
"initApi": "/api/mock2/form/initData",
|
2022-03-29 17:46:24 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
label: '角色',
|
|
|
|
|
name: 'myrole',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
label: '年龄',
|
|
|
|
|
name: 'age',
|
2022-03-29 17:46:24 +08:00
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | ------------------------------------------------------------------- |
|
|
|
|
|
| value | `any` | - | 值 |
|
|
|
|
|
| index | `number` | - | 当目标组件是`combo`时,可以指定更新的数据索引, `1.10.1 及以上版本` |
|
2022-03-24 20:22:01 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------------- |
|
|
|
|
|
| componentId | `string` | - | 指定赋值的目标组件 id |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
### 自定义 JS
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-08-03 17:55:39 +08:00
|
|
|
|
通过配置`actionType: 'custom'`实现自定义 JS。JS 中可以访问以下对象和方法:
|
|
|
|
|
|
|
|
|
|
- context,渲染器上下文
|
|
|
|
|
- doAction() 动作执行方法,用于调用任何 actionType 指定的动作
|
2022-10-12 15:09:03 +08:00
|
|
|
|
- event,事件对象,可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预,可以通过 event.data 获取事件上下文
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
label: '发送一个 http 请求',
|
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'custom',
|
|
|
|
|
script:
|
2022-04-20 15:20:42 +08:00
|
|
|
|
"doAction({actionType: 'ajax', args: {api: '/api/mock2/form/saveForm'}});\n //event.stopPropagation();"
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 2.3.2 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | ------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| script | `string`/`function` | - | 自定义 JS 脚本代码,代码内可以通过调用`doAction`执行任何[动作](../../docs/concepts/event-action#动作) ,通过事件对象`event`可以实现事件动作干预 |
|
|
|
|
|
|
2022-08-03 17:55:39 +08:00
|
|
|
|
#### 支持异步
|
|
|
|
|
|
|
|
|
|
> 2.0.3 及以上版本
|
|
|
|
|
|
|
|
|
|
- 方式一:通过返回 Promise 实例的方式
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"title": "表单",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"label": "编号",
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "pId",
|
|
|
|
|
"id": "u:e47e2c8e6be8",
|
|
|
|
|
"mode": "horizontal",
|
|
|
|
|
"addOn": {
|
|
|
|
|
"label": "自动获取",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:52cd013e120f",
|
|
|
|
|
"actionType": "disabled"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"script": "return new Promise((resolve, reject) => {setTimeout(() => {event.setData({...event.data, pId: '01027359'});resolve();}, 3000)})",
|
|
|
|
|
"actionType": "custom"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:e47e2c8e6be8",
|
|
|
|
|
"args": {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
"value": "${pId}"
|
2022-08-03 17:55:39 +08:00
|
|
|
|
},
|
|
|
|
|
"actionType": "setValue"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:52cd013e120f",
|
|
|
|
|
"actionType": "enabled"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"weight": 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"id": "u:52cd013e120f"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"apiFromAPICenter": false,
|
|
|
|
|
"id": "u:76203156676b"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
- 方式二:通过返回 Thunk 的方式
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"title": "表单",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"label": "编号",
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "pId",
|
|
|
|
|
"id": "u:e47e2c8e6be7",
|
|
|
|
|
"mode": "horizontal",
|
|
|
|
|
"addOn": {
|
|
|
|
|
"label": "自动获取",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:52cd013e120e",
|
|
|
|
|
"actionType": "disabled"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"script": "return (callback) => { setTimeout(() => {event.setData({...event.data, pId: '01027359' });callback();}, 3000) };",
|
|
|
|
|
"actionType": "custom"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:e47e2c8e6be7",
|
|
|
|
|
"args": {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
"value": "${pId}"
|
2022-08-03 17:55:39 +08:00
|
|
|
|
},
|
|
|
|
|
"actionType": "setValue"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"componentId": "u:52cd013e120e",
|
|
|
|
|
"actionType": "enabled"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"weight": 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"id": "u:52cd013e120e"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"apiFromAPICenter": false,
|
|
|
|
|
"id": "u:76203156676a"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 存储数据
|
|
|
|
|
|
|
|
|
|
有时在执行自定义 JS 的时候,希望该过程中产生的数据可以分享给后面的动作使用,此时可以通过`event.setData()`来实现事件上下文的设置,这样后面动作都可以通过事件上下文来获取共享的数据。
|
2022-04-14 19:13:35 +08:00
|
|
|
|
|
2022-08-03 17:55:39 +08:00
|
|
|
|
> 注意:直接调用`event.setData()`将修改事件的原有上下文,如果不希望覆盖可以通过`event.setData({...event.data, {xxx: xxx}})`来进行数据的合并。
|
2022-04-14 19:13:35 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 触发其他组件的动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
通过配置`componentId`来触发指定组件的动作,组件动作配置通过`args`传入`(> 1.9.0 及以上版本)`,动作参数请查看对应的组件的[动作表](../../components/form/index#动作表),更多示例请查看[组件事件动作示例](../../../examples/event/form)。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '选中选项卡2',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
className: 'mr-3 mb-3',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'changeActiveKey',
|
|
|
|
|
componentId: 'tabs-change-receiver',
|
2022-04-18 17:13:24 +08:00
|
|
|
|
args: {
|
2022-04-29 18:15:33 +08:00
|
|
|
|
activeKey: 2
|
2022-04-18 17:13:24 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'tabs-change-receiver',
|
|
|
|
|
type: 'tabs',
|
|
|
|
|
mode: 'line',
|
|
|
|
|
tabs: [
|
|
|
|
|
{
|
|
|
|
|
title: '选项卡1',
|
|
|
|
|
body: '选项卡内容1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '选项卡2',
|
|
|
|
|
body: '选项卡内容2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '选项卡3',
|
|
|
|
|
body: '选项卡内容3'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 触发广播动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'broadcast'`实现触发一个广播。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
"name": "role",
|
|
|
|
|
"type": "select",
|
|
|
|
|
"label": "广播一下",
|
|
|
|
|
"mode": "row",
|
|
|
|
|
"options": [
|
|
|
|
|
{
|
|
|
|
|
"label": "海贼王的男人",
|
|
|
|
|
"value": "路飞"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "海上华佗",
|
|
|
|
|
"value": "乔巴"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "海上食神",
|
|
|
|
|
"value": "山治"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"change": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'broadcast',
|
|
|
|
|
args: {
|
2022-10-18 16:26:13 +08:00
|
|
|
|
eventName: 'broadcast_1',
|
|
|
|
|
},
|
|
|
|
|
data: {
|
2022-03-15 13:40:02 +08:00
|
|
|
|
myrole: '${role}',
|
|
|
|
|
age: 18
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
id: 'form_001_form_01',
|
|
|
|
|
title: '表单1(优先级低)',
|
|
|
|
|
name: 'sub-form1',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '昵称',
|
|
|
|
|
name: 'myname',
|
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
onEvent: {
|
|
|
|
|
broadcast_1: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'reload',
|
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
myname: '${myrole}', // 从事件数据中取
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": "info",
|
|
|
|
|
"msg": "表单1刷新完成"
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
name: 'form2',
|
|
|
|
|
id: 'form_002',
|
|
|
|
|
title: '表单2(优先级中)',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '角色',
|
|
|
|
|
name: 'myrole',
|
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '年龄',
|
|
|
|
|
name: 'age',
|
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
onEvent: {
|
|
|
|
|
broadcast_1: {
|
|
|
|
|
weight: 2,
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'reload',
|
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
myrole: '${myrole}',
|
|
|
|
|
age: '${age}'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": "info",
|
|
|
|
|
"msg": "表单2刷新完成"
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
name: 'form3',
|
|
|
|
|
id: 'form_003',
|
|
|
|
|
title: '表单3(优先级高)',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
id: 'form_003_text_01',
|
|
|
|
|
label: '职业',
|
|
|
|
|
name: 'job',
|
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
api: 'https://api/form/form3',
|
|
|
|
|
onEvent: {
|
|
|
|
|
broadcast_1: {
|
|
|
|
|
weight: 3,
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'reload',
|
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
job: '${myrole}'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": "info",
|
|
|
|
|
"msg": "表单3刷新完成"
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
|
|
|
|
|
|
|
|
|
> `< 2.3.2 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | -------- | ------ | ------------------------------------------------ |
|
|
|
|
|
| eventName | `string` | - | 广播动作对应的自定义事件名称,用于广播事件的监听 |
|
|
|
|
|
|
|
|
|
|
**其他属性**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | -------- | ------ | -------------------------------------------------------- |
|
|
|
|
|
| weight | `number` | 0 | 可以通过配置动作执行优先级来控制所有监听者的动作执行顺序 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 自定义动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-05-17 17:01:17 +08:00
|
|
|
|
除了以上内置动作,你还可以注册自己的动作。通过对`RendererAction`的`run`方法的实现可以定制自己的动作逻辑,最后通过`registerAction`注册到 amis 事件动作中。
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
import {
|
|
|
|
|
ListenerAction,
|
|
|
|
|
ListenerContext,
|
|
|
|
|
registerAction,
|
|
|
|
|
RendererAction
|
2022-06-30 20:47:34 +08:00
|
|
|
|
} from 'amis-core';
|
|
|
|
|
import {RendererEvent} from 'amis-core';
|
2022-05-17 17:01:17 +08:00
|
|
|
|
|
|
|
|
|
// 动作定义
|
|
|
|
|
interface IMyAction extends ListenerAction {
|
|
|
|
|
actionType: 'my-action';
|
|
|
|
|
args: {
|
|
|
|
|
param1: string, // 动作参数1
|
|
|
|
|
param2: string // 动作参数2
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 我的动作实现
|
|
|
|
|
*/
|
|
|
|
|
export class MyAction implements RendererAction {
|
|
|
|
|
run(action: IMyAction, renderer: ListenerContext, event: RendererEvent<any>) {
|
|
|
|
|
const props = renderer.props;
|
|
|
|
|
const {param1, param2} = action.args;
|
|
|
|
|
|
|
|
|
|
// 你的动作逻辑
|
|
|
|
|
// ...
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 注册自定义动作
|
|
|
|
|
registerAction('my-action', new MyAction());
|
|
|
|
|
```
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
# 编排动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置不同的逻辑动作实现动作编排,支持嵌套。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-04-20 15:20:42 +08:00
|
|
|
|
## 条件
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`expression: 表达式`来实现条件逻辑。
|
|
|
|
|
|
2022-04-20 15:20:42 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
|
|
|
|
expression: 'okk'
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '符合条件的执行',
|
|
|
|
|
level: 'primary',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '我okk~'
|
|
|
|
|
},
|
|
|
|
|
expression: 'expression === "okk"'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '1'
|
|
|
|
|
},
|
|
|
|
|
expression: 'expression === "nono"'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '我也okk~'
|
|
|
|
|
},
|
|
|
|
|
expression: 'expression === "okk"'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-04-20 15:20:42 +08:00
|
|
|
|
|
2022-05-10 21:31:05 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------- | ------------------------------------------- | ------ | ---------------------------- |
|
|
|
|
|
| expression | `boolean`\|[表达式](../concepts/expression) | - | 执行条件,不设置表示默认执行 |
|
2022-04-20 15:20:42 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 循环
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'for'`实现循环逻辑。
|
|
|
|
|
|
2022-04-20 15:20:42 +08:00
|
|
|
|
**单层循环**
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
loopName: 'loopData',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
loopData: [
|
|
|
|
|
{
|
|
|
|
|
name: 'lv',
|
|
|
|
|
age: '19'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'xj',
|
|
|
|
|
age: '21'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '循环发送两次请求,且每次携带了循环的数据',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'loop',
|
|
|
|
|
args: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
level: 3,
|
|
|
|
|
loopName: '${loopName}'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'ajax',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?name=${name}&age=${age}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**嵌套循环**
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
|
|
|
|
loopName: 'loopData',
|
|
|
|
|
loopData: [
|
|
|
|
|
{
|
|
|
|
|
name: 'lv',
|
|
|
|
|
age: '19'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'xj',
|
|
|
|
|
age: '21'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '循环',
|
|
|
|
|
className: 'm-2',
|
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'loop',
|
|
|
|
|
preventDefault: false,
|
|
|
|
|
stopPropagation: false,
|
|
|
|
|
args: {
|
|
|
|
|
loopName: '${loopName}',
|
|
|
|
|
level: 3
|
|
|
|
|
},
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '第1层循环动作1${name}'
|
|
|
|
|
},
|
|
|
|
|
preventDefault: false,
|
|
|
|
|
stopPropagation: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '第1层循环动作2${name}'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'loop',
|
|
|
|
|
args: {
|
|
|
|
|
loopName: '${loopName}',
|
|
|
|
|
level: 3
|
|
|
|
|
},
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '第2层循环动作1${name}'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '第2层循环动作2${name}'
|
|
|
|
|
},
|
|
|
|
|
preventDefault: false,
|
|
|
|
|
stopPropagation: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'continue'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '第2层循环动作3${name}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**动作属性(args)**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
> `< 1.8.0 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------- | -------- | ------ | ------------ |
|
|
|
|
|
| loopName | `string` | - | 循环变量名称 |
|
|
|
|
|
|
|
|
|
|
**其他属性**
|
|
|
|
|
|
|
|
|
|
> `< 2.3.2 及以下版本`,以下属性与 args 同级。
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------- | ---------------------------------------------------- | ------ | ------------------------------------- |
|
|
|
|
|
| children | Array<[动作](../../docs/concepts/event-action#动作)> | - | 子动作,可以通过`break动作`来跳出循环 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## Break 动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'for'`和`actionType: 'break'`实现循环跳出。
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
loopName: 'loopData',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
loopData: [
|
|
|
|
|
{
|
|
|
|
|
name: 'lv',
|
|
|
|
|
age: '19'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'xj',
|
|
|
|
|
age: '21'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '只执行了第一个动作就跳出了循环',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'loop',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
loopName: '${loopName}'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
children: [
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '第 1 个动作',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'break'
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '第 2 个动作',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## Continue 动作
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'for'`和`actionType: 'continue'`实现循环跳过。
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
loopName: 'loopData',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
loopData: [
|
|
|
|
|
{
|
|
|
|
|
name: 'lv',
|
|
|
|
|
age: '19'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'xj',
|
|
|
|
|
age: '21'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '只循环执行第一个动作',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'loop',
|
|
|
|
|
args: {
|
2022-04-20 15:20:42 +08:00
|
|
|
|
loopName: '${loopName}',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
level: 3
|
|
|
|
|
},
|
|
|
|
|
children: [
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '第 1 个动作',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'continue'
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'success',
|
|
|
|
|
msg: '最后的动作',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 排他(switch)
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'switch'`实现排他逻辑。
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
|
|
|
|
data: {
|
|
|
|
|
branchCont: 18
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '只执行动作2',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'switch',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '动作1',
|
2022-04-29 16:22:53 +08:00
|
|
|
|
position: 'top-right'
|
2022-04-20 15:20:42 +08:00
|
|
|
|
},
|
2022-04-29 16:22:53 +08:00
|
|
|
|
expression: 'this.branchCont > 19',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
stopPropagation: true // 这里无效,因为条件不成立
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '动作2',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
expression: 'this.branchCont > 17'
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-03-29 12:42:23 +08:00
|
|
|
|
actionType: "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
msgType: 'info',
|
|
|
|
|
msg: '动作3',
|
|
|
|
|
position: 'top-right'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
expression: 'this.branchCont > 16'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------- | ---------------------------------------------------- | ------ | ------------------------------------------------------ |
|
|
|
|
|
| children | Array<[动作](../../docs/concepts/event-action#动作)> | - | 子动作,每个子动作可以通过配置`expression`来匹配的条件 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
## 并行
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过配置`actionType: 'parallel'`实现并行执逻辑。
|
|
|
|
|
|
2022-03-15 13:40:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
wrapWithPanel: false,
|
2022-10-12 15:09:03 +08:00
|
|
|
|
data: {
|
|
|
|
|
name: 'lvxj',
|
|
|
|
|
age: 'kkkk'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
2022-06-07 21:27:34 +08:00
|
|
|
|
label: '同时发送两个ajax请求,并显示请求返回',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'parallel',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
2022-06-07 21:27:34 +08:00
|
|
|
|
actionType: 'ajax',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
2022-06-07 21:27:34 +08:00
|
|
|
|
api: {
|
|
|
|
|
url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData?name=${name}',
|
|
|
|
|
method: 'get'
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
success: '请求1成功了!欧耶',
|
|
|
|
|
failed: '失败了呢。。'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
outputVar: 'var1'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
2022-06-07 21:27:34 +08:00
|
|
|
|
actionType: 'ajax',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
2022-06-07 21:27:34 +08:00
|
|
|
|
api: {
|
|
|
|
|
url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?name=${name}',
|
|
|
|
|
method: 'get'
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
success: '请求2成功了!欧耶',
|
|
|
|
|
failed: '失败了呢。。'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
outputVar: 'var2'
|
2022-10-12 15:09:03 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'ajax',
|
|
|
|
|
args: {
|
|
|
|
|
api: {
|
|
|
|
|
url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?name=${name}',
|
|
|
|
|
method: 'get'
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
success: '请求3成功了!欧耶',
|
|
|
|
|
failed: '失败了呢。。'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
outputVar: 'var3'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
2022-06-07 21:27:34 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
msg: 'var1:${var1|json}, var2:${var2|json}, var3:${var3|json}'
|
2022-06-07 21:27:34 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
**其他属性**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------- | ---------------------------------------------------- | ------ | ------ |
|
|
|
|
|
| children | Array<[动作](../../docs/concepts/event-action#动作)> | - | 子动作 |
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
# 动作间数据传递
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-12 15:09:03 +08:00
|
|
|
|
从事件触发开始,整个数据流包含事件本身产生的事件数据和动作产生的动作数据,事件源头产生的数据在 AMIS 事件动作机制底层已经自动加入渲染器数据域,可以通过`xxx`直接获取(`< 2.3.2 及以下版本 为 event.data.xxx`),而部分动作产生的数据如何流动需要交互设计者进行介入,对于数据流动可以通过数据映射,将上一个动作产生的数据作为动作参数写入下一个动作。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
**传递数据**
|
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
通过 `data` 指定输入的参数数据(`< 2.3.2 及以下版本`通过`args`传递数据),它是一个键值对。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
id: 'b_001',
|
|
|
|
|
label: '发一个广播,携带动作参数',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
className: 'mb-2',
|
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'broadcast',
|
|
|
|
|
args: {
|
2022-10-18 16:26:13 +08:00
|
|
|
|
eventName: 'broadcast_1',
|
|
|
|
|
},
|
|
|
|
|
data: {
|
2022-03-15 13:40:02 +08:00
|
|
|
|
name: 'lvxj',
|
|
|
|
|
age: 18
|
|
|
|
|
},
|
|
|
|
|
description: '一个按钮的点击事件'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
name: 'form1',
|
|
|
|
|
id: 'form_001',
|
|
|
|
|
title: '接收广播事件的参数',
|
|
|
|
|
debug: true,
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
id: 'form_001_text_01',
|
|
|
|
|
label: '年龄',
|
|
|
|
|
name: 'age',
|
|
|
|
|
disabled: false,
|
|
|
|
|
mode: 'horizontal'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
data: {
|
|
|
|
|
name: 'amis'
|
|
|
|
|
},
|
|
|
|
|
onEvent: {
|
|
|
|
|
broadcast_1: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'reload',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
data: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
age: '${age}',
|
|
|
|
|
name: '${name}'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-07-19 13:21:45 +08:00
|
|
|
|
**引用 http 请求动作返回的数据**
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-12 15:09:03 +08:00
|
|
|
|
http 请求动作执行结束后,后面的动作可以通过 `${responseResult}`或`${{outputVar}}`来获取请求响应结果,响应结果的结构定义参考[发送 http 请求](../../docs/concepts/event-action#发送-http-请求)。
|
|
|
|
|
|
|
|
|
|
> `< 2.3.2 及以下版本 需要通过 ${event.data.{xxx}}`来获取以上信息,例如:${event.data.responseResult}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
label: '发送Ajax请求,并把返回数据传给弹窗',
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'ajax',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
2022-07-19 13:21:45 +08:00
|
|
|
|
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
actionType: 'dialog',
|
2022-10-18 16:26:13 +08:00
|
|
|
|
data: {
|
2022-10-12 15:09:03 +08:00
|
|
|
|
id: '${responseResult.responseData.id}'
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
dialog: {
|
|
|
|
|
type: 'dialog',
|
2022-04-13 18:28:08 +08:00
|
|
|
|
id: 'dialog_005',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
title: '弹框标题1',
|
|
|
|
|
data: {
|
|
|
|
|
id: '${id}'
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'tpl',
|
|
|
|
|
tpl: '<p>请求返回的数据:id=${id}</p>',
|
|
|
|
|
inline: false
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-03-29 17:46:24 +08:00
|
|
|
|
# 事件动作干预
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
事件动作干预是指执行完当前动作后,干预所监听事件默认处理逻辑和后续其他动作的执行。通过`preventDefault`、`stopPropagation`分别阻止监听事件默认行为和停止下一个动作执行。
|
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
## 阻止事件默认行为
|
|
|
|
|
|
|
|
|
|
有些组件内置了一些逻辑来帮助用户降低配置成本,但可能这些逻辑并不符合设计者的业务需求,这时可以通过`onEvent`来监听对应的事件,并通过`preventDefault`来阻止那些默认处理逻辑来达到想要的最终效果。更多示例请查看[阻止组件默认行为示例](../../../examples/action/prevent/form)。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'page',
|
|
|
|
|
title: '弹窗确认后执行其他动作并阻止默认关闭',
|
|
|
|
|
body: [
|
2022-03-15 13:40:02 +08:00
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
type: 'button',
|
|
|
|
|
className: 'ml-2',
|
|
|
|
|
label: '打开弹窗',
|
2022-04-20 15:20:42 +08:00
|
|
|
|
level: 'primary',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
onEvent: {
|
|
|
|
|
click: {
|
|
|
|
|
actions: [
|
2022-03-15 13:40:02 +08:00
|
|
|
|
{
|
2022-05-10 19:31:20 +08:00
|
|
|
|
actionType: 'dialog',
|
|
|
|
|
dialog: {
|
|
|
|
|
type: 'dialog',
|
|
|
|
|
title: '提示',
|
|
|
|
|
id: 'dialog_001',
|
|
|
|
|
data: {
|
|
|
|
|
myage: '22'
|
|
|
|
|
},
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'alert',
|
2022-05-10 21:31:05 +08:00
|
|
|
|
body: '输入Do not close,确认后将不关闭弹窗',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
level: 'warning'
|
2022-05-10 21:31:05 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'command'
|
2022-05-10 19:31:20 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
onEvent: {
|
|
|
|
|
confirm: {
|
|
|
|
|
actions: [
|
|
|
|
|
{
|
|
|
|
|
actionType: 'toast',
|
|
|
|
|
args: {
|
|
|
|
|
msg: '不关闭'
|
|
|
|
|
},
|
2022-10-12 15:09:03 +08:00
|
|
|
|
preventDefault: 'command === "Do not close"'
|
2022-05-10 19:31:20 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-05-10 19:31:20 +08:00
|
|
|
|
## 停止后续动作执行
|
|
|
|
|
|
|
|
|
|
通过`onEvent`可以对监听的事件配置一组动作,这些动作是顺序执行的,有时间设计者希望执行某个/些动作后就停止继续执行后面的动作,这时候可以通过`stopPropagation`来停止执行后面配置的所有动作。
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
2022-05-10 19:31:20 +08:00
|
|
|
|
"title": "只执行3个动作中的前两个动作",
|
2022-03-15 13:40:02 +08:00
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
2022-05-10 19:31:20 +08:00
|
|
|
|
"label": "弹出2个提示",
|
2022-04-14 14:18:27 +08:00
|
|
|
|
level: 'primary',
|
2022-03-15 13:40:02 +08:00
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": 'info',
|
|
|
|
|
"msg": '动作1'
|
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": 'info',
|
|
|
|
|
"msg": '动作2'
|
|
|
|
|
},
|
2022-03-15 13:40:02 +08:00
|
|
|
|
"stopPropagation": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"actionType": "toast",
|
2022-04-20 15:20:42 +08:00
|
|
|
|
args: {
|
|
|
|
|
"msgType": 'info',
|
2022-05-10 19:31:20 +08:00
|
|
|
|
"msg": '动作3',
|
|
|
|
|
"position": 'top-right'
|
2022-04-20 15:20:42 +08:00
|
|
|
|
}
|
2022-03-15 13:40:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-05-17 17:01:17 +08:00
|
|
|
|
# 自定义组件接入事件动作
|
|
|
|
|
|
|
|
|
|
需求场景主要是想要自定义组件的内部事件暴露出去,能够通过对事件的监听来执行所需动作,并希望自定义组件自身的动作能够被其他组件调用。接入方法是通过`props.dispatchEvent`派发自身的各种事件,使其具备更灵活的交互设计能力;通过实现`doAction`方法实现其他组件对其专属动作的调用,需要注意的是,此处依赖内部的 `Scoped Context`来实现自身的注册,可以参考 [组件间通信](../../docs/extend/custom-react#组件间通信)。
|
|
|
|
|
|
2022-04-20 15:20:42 +08:00
|
|
|
|
# 属性表
|
2022-03-15 13:40:02 +08:00
|
|
|
|
|
2022-10-18 16:26:13 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| actionType | `string` | - | 动作名称 |
|
|
|
|
|
| args | `object` | - | 动作属性`{key:value}`,支持数据映射 |
|
|
|
|
|
| data | `object` | - | 追加数据`{key:value}`,支持数据映射,如果是触发其他组件的动作,则该数据会传递给目标组件,`> 2.3.2 及以上版本` |
|
|
|
|
|
| dataMergeMode | `string` | 'merge' | 当配置了 data 的时候,可以控制数据追加方式,支持合并(`merge`)和覆盖(`override`)两种模式,`> 2.3.2 及以上版本` |
|
|
|
|
|
| preventDefault | `boolean`\|[表达式](../concepts/expression) | false | 阻止事件默认行为,`> 1.10.0 及以上版本支持表达式` |
|
|
|
|
|
| stopPropagation | `boolean`\|[表达式](../concepts/expression) | false | 停止后续动作执行,`> 1.10.0 及以上版本支持表达式` |
|
|
|
|
|
| expression | `boolean`\|[表达式](../concepts/expression) | - | 执行条件,不设置表示默认执行 |
|
|
|
|
|
| outputVar | `string` | - | 输出数据变量名 |
|