多重弹窗获取数据
问题:多层弹窗中,第一个弹窗之后的弹窗无法获取 event 事件对象数据
原地址:https://github.com/baidu/amis/issues/10949
这里值得学习的地方:
- 在事件处理中,如果存在多个 action,可以使用
event
变量来引用或是修改上下文数据。动作间数据传递- 使用
event.data
获取事件上下文,但是并不会自动的覆盖非 action 中调用的其它对象的数据域,需要进行显式的引用。比如此例子中的弹窗数据引用。 - 在自定义事件中处理中
actionType: 'custom'
,可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预。注意:直接调用event.setData()
将修改事件的原有上下文,如果不希望覆盖可以通过event.setData({...event.data, ...{xxx: xxx}})
来进行数据的合并。
- 使用
- http 请求动作执行结束后,后面的动作可以通过 ${responseResult}或$来获取请求响应结果
- 区分:更新事件上下文数据与更新组件数据,通过配置
actionType: 'setValue'
实现组件数据域变量更新,这个是异步的。而更新事件上下文数据,需要通过${event.data.xxx}
来获取。 - 更新事件上下文数据可以使用
"actionType": "setEventData"
或是actionType: 'custom'
。更新事件上下文数据json{ "actionType": "setEventData", "args": { "key": "title", "value": "页面标题:${window:document[title]}" } }
完整的测试例子:
json
{
"type": "button",
"label": "批量下线",
"level": "primary",
"onEvent": {
"click": {
"actions": [
{
"actionType": "dialog",
"id": "offLineDialog",
"args": {
"dialog": {
"title": "下线:${event|json}",
"showCloseButton": false,
"body": [
{
"type": "tpl",
"tpl": "确定要下线吗?"
}
],
"actions": [
{
"type": "button",
"label": "取消",
"onEvent": {
"click": {
"actions": [
{
"actionType": "closeDialog"
}
]
}
}
},
{
"type": "button",
"level": "primary",
"label": "确认",
"onEvent": {
"click": {
"actions": [
{
"actionType": "ajax",
"args": {
"api": {
"url": "https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/form/initData",
"method": "post",
"adaptor": "const { status, message, data } = payload; return { status: status === 200 ? 0 : status, msg: message, data: { offLineOkRelList: [{ name: '度量1' }, { name: '度量2' }], offLineOkIsSuccess: false }}"
}
}
},
{
"actionType": "toast",
"args": {
"msg": "${event|json}"
}
},
{
"actionType": "dialog",
"expression": "event.data.offLineOkRelList",
"args": {
"dialog": {
"title": "下线失败提示:${event|json}",
"showCloseButton": false,
"data": {
"offLineOkRelList": "${event.data.offLineOkRelList}",
"event": "${event}"
},
"body": [
{
"type": "tpl",
"tpl": "以下【指标】批量下线失败,具体失败原因:请找产品经理咨询:${event.data.offLineOkRelList|json}"
},
{
"type": "each",
"name": "offLineOkRelList",
"items": {
"type": "tpl",
"tpl": "<div><%= data?.name %></div>"
}
}
],
"actions": [
{
"type": "button",
"label": "取消",
"onEvent": {
"click": {
"actions": [
{
"actionType": "closeDialog"
},
{
"actionType": "closeDialog",
"componentId": "offLineDialog"
},
{
"actionType": "toast",
"args": {
"msg": "${event|json}"
}
}
]
}
}
},
{
"type": "button",
"level": "primary",
"label": "确认",
"onEvent": {
"click": {
"actions": [
{
"actionType": "closeDialog"
},
{
"actionType": "closeDialog",
"componentId": "offLineDialog"
}
]
}
}
}
]
}
}
}
]
}
}
}
]
}
}
}
]
}
},
"id": "u:42213f50e109"
}