mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
Merge pull request #6776 from 2betop/fix-dialog-close
fix: 修复弹窗关闭上层弹窗不生效的问题并补充文档
This commit is contained in:
hsm-lv
GitHub
commit
ff2797bc87
@ -327,7 +327,7 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
}
|
||||
```
|
||||
|
||||
## 行为后关闭弹框
|
||||
## 动作后关闭弹框
|
||||
|
||||
在弹框中配置行为按钮，可以在按钮上配置`"close": true`，在行为完成后，关闭当前弹框。
|
||||
|
||||
@ -357,9 +357,49 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
}
|
||||
```
|
||||
|
||||
以上例子是关闭当前弹窗，如果希望关闭上层弹窗，则需要给目标弹窗设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "多级弹框",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "提示",
|
||||
"body": "这是个简单的弹框",
|
||||
"name": "dialog_1",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "confirm",
|
||||
"label": "确认",
|
||||
"primary": true
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"label": "再弹一个",
|
||||
"dialog": {
|
||||
"title": "弹框中的弹框",
|
||||
"body": "关闭当前弹窗的时候把外层的弹窗一起关了",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "关闭所有",
|
||||
"level": "info",
|
||||
"close": "dialog_1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置弹窗的按钮
|
||||
|
||||
可以通过设置 `actions` 来控制弹窗中的按钮。
|
||||
默认弹窗会自动生成两个按钮，一个取消，一个确认。如果通过 `actions` 来自定义配置，则以配置的为准。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
|
||||
@ -279,6 +279,164 @@ order: 43
|
||||
}
|
||||
```
|
||||
|
||||
## 多级弹框
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "多级弹框",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "提示",
|
||||
"body": "这是个简单的弹框",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "confirm",
|
||||
"label": "确认",
|
||||
"primary": true
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "drawer",
|
||||
"label": "再弹一个",
|
||||
"drawer": {
|
||||
"title": "弹框中的弹框",
|
||||
"body": "如果你想，可以无限弹下去",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "drawer",
|
||||
"label": "来吧",
|
||||
"level": "info",
|
||||
"drawer": {
|
||||
"title": "弹框中的弹框",
|
||||
"body": "如果你想，可以无限弹下去",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "confirm",
|
||||
"label": "不弹了",
|
||||
"primary": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作后关闭弹框
|
||||
|
||||
在弹框中配置行为按钮，可以在按钮上配置`"close": true`，在行为完成后，关闭当前弹框。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "弹个框",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "弹框",
|
||||
"body": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "默认的 ajax 请求",
|
||||
"actionType": "ajax",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "ajax 请求成功后关闭弹框",
|
||||
"actionType": "ajax",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"close": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
以上例子是关闭当前弹窗，如果希望关闭上层弹窗，则需要给目标弹窗设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "多级弹框",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "提示",
|
||||
"body": "这是个简单的弹框",
|
||||
"name": "drawer_1",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "confirm",
|
||||
"label": "确认",
|
||||
"primary": true
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "drawer",
|
||||
"label": "再弹一个",
|
||||
"drawer": {
|
||||
"title": "弹框中的弹框",
|
||||
"body": "关闭当前弹窗的时候把外层的弹窗一起关了",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "关闭所有",
|
||||
"level": "info",
|
||||
"close": "drawer_1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置弹窗的按钮
|
||||
|
||||
默认弹窗会自动生成两个按钮，一个取消，一个确认。如果通过 `actions` 来自定义配置，则以配置的为准。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "无按钮",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "提示",
|
||||
"actions": [],
|
||||
"body": "无按钮的弹框"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "只有一个确认按钮",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "提示",
|
||||
"actions": [{
|
||||
"type": "button",
|
||||
"actionType": "confirm",
|
||||
"label": "OK",
|
||||
"primary": true
|
||||
}],
|
||||
"body": "只有一个 OK 的弹框"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|
||||
@ -829,7 +829,11 @@ export class DialogRenderer extends Dialog {
|
||||
// clear error
|
||||
store.updateMessage();
|
||||
onClose();
|
||||
action.close && this.closeTarget(action.close);
|
||||
if (action.close) {
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
} else if (action.actionType === 'confirm') {
|
||||
const rendererEvent = await dispatchEvent(
|
||||
'confirm',
|
||||
@ -880,7 +884,9 @@ export class DialogRenderer extends Dialog {
|
||||
action.target && scoped.reload(action.target, data);
|
||||
if (action.close || action.type === 'submit') {
|
||||
this.handleSelfClose(undefined, action.type === 'submit');
|
||||
this.closeTarget(action.close);
|
||||
action.close &&
|
||||
typeof action.close === 'string' &&
|
||||
this.closeTarget(action.close);
|
||||
}
|
||||
} else if (this.tryChildrenToHandle(action, data)) {
|
||||
// do nothing
|
||||
@ -902,8 +908,9 @@ export class DialogRenderer extends Dialog {
|
||||
action.reload &&
|
||||
this.reloadTarget(filter(action.reload, store.data), store.data);
|
||||
if (action.close) {
|
||||
this.handleSelfClose();
|
||||
this.closeTarget(action.close);
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
@ -912,7 +919,7 @@ export class DialogRenderer extends Dialog {
|
||||
}
|
||||
});
|
||||
} else if (onAction) {
|
||||
let ret = onAction(
|
||||
await onAction(
|
||||
e,
|
||||
{
|
||||
...action,
|
||||
@ -922,10 +929,12 @@ export class DialogRenderer extends Dialog {
|
||||
throwErrors,
|
||||
delegate || this.context
|
||||
);
|
||||
action.close &&
|
||||
(ret && ret.then
|
||||
? ret.then(this.handleSelfClose)
|
||||
: setTimeout(this.handleSelfClose, 200));
|
||||
|
||||
if (action.close) {
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -811,7 +811,11 @@ export class DrawerRenderer extends Drawer {
|
||||
}
|
||||
store.setCurrentAction(action);
|
||||
onClose();
|
||||
action.close && this.closeTarget(action.close);
|
||||
if (action.close) {
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
} else if (action.actionType === 'confirm') {
|
||||
const rendererEvent = await dispatchEvent(
|
||||
'confirm',
|
||||
@ -831,9 +835,11 @@ export class DrawerRenderer extends Drawer {
|
||||
} else if (action.actionType === 'reload') {
|
||||
store.setCurrentAction(action);
|
||||
action.target && scoped.reload(action.target, data);
|
||||
|
||||
if (action.close) {
|
||||
this.handleSelfClose();
|
||||
this.closeTarget(action.close);
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
} else if (this.tryChildrenToHandle(action, data)) {
|
||||
// do nothing
|
||||
@ -854,9 +860,11 @@ export class DrawerRenderer extends Drawer {
|
||||
redirect && env.jumpTo(redirect, action);
|
||||
action.reload &&
|
||||
this.reloadTarget(filter(action.reload, store.data), store.data);
|
||||
|
||||
if (action.close) {
|
||||
this.handleSelfClose();
|
||||
this.closeTarget(action.close);
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
@ -865,17 +873,13 @@ export class DrawerRenderer extends Drawer {
|
||||
}
|
||||
});
|
||||
} else if (onAction) {
|
||||
let ret = onAction(
|
||||
e,
|
||||
action,
|
||||
data,
|
||||
throwErrors,
|
||||
delegate || this.context
|
||||
);
|
||||
action.close &&
|
||||
(ret && ret.then
|
||||
? ret.then(this.handleSelfClose)
|
||||
: setTimeout(this.handleSelfClose, 200));
|
||||
await onAction(e, action, data, throwErrors, delegate || this.context);
|
||||
|
||||
if (action.close) {
|
||||
action.close === true
|
||||
? this.handleSelfClose()
|
||||
: this.closeTarget(action.close);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user