mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
566 lines
17 KiB
Markdown
566 lines
17 KiB
Markdown
|
---
|
|||
|
|
title: Dialog 对话框
|
|||
|
|
description:
|
|||
|
|
type: 0
|
|||
|
|
group: ⚙ 组件
|
|||
|
|
menuName: Dialog 对话框
|
|||
|
|
icon:
|
|||
|
|
order: 41
|
|||
|
|
---
|
|||
|
|
Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框以供用户操作。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"label": "点击弹框",
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "弹框标题",
|
|||
|
|
"body": "这是一个弹框"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 配置尺寸
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button-toolbar",
|
|||
|
|
"buttons": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "较小的弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"size": "sm",
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": "这是个简单的弹框"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "标准弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": "这是个简单的弹框"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "较大的弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"size": "lg",
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": "这是个简单的弹框"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "很大的弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"size": "xl",
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": "这是个简单的弹框"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "占满屏幕的弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"size": "full",
|
|||
|
|
"title": "全屏弹框",
|
|||
|
|
"body": "弹框尽可能占满，内容部分滚动。"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 多级弹框
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "多级弹框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": "这是个简单的弹框",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"label": "确认",
|
|||
|
|
"primary": true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"label": "再弹一个",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "弹框中的弹框",
|
|||
|
|
"body": "如果你想，可以无限弹下去",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"label": "来吧",
|
|||
|
|
"level": "info",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "弹框中的弹框",
|
|||
|
|
"body": "如果你想，可以无限弹下去",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"label": "不弹了",
|
|||
|
|
"primary": true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 弹框中配置表单
|
|||
|
|
|
|||
|
|
### 基本使用
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹个表单",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "在弹框中的表单",
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"name": "username",
|
|||
|
|
"required": true,
|
|||
|
|
"placeholder": "请输入用户名",
|
|||
|
|
"label": "用户名"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "password",
|
|||
|
|
"name": "password",
|
|||
|
|
"label": "密码",
|
|||
|
|
"required": true,
|
|||
|
|
"placeholder": "请输入密码"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "checkbox",
|
|||
|
|
"name": "rememberMe",
|
|||
|
|
"label": "记住登录"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 提交表单 或 ajax请求
|
|||
|
|
|
|||
|
|
弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹个表单",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "在弹框中的表单",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"label": "提交表单",
|
|||
|
|
"actionType": "submit",
|
|||
|
|
"primary": true,
|
|||
|
|
"type": "button"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "ajax请求",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"primary": true,
|
|||
|
|
"type": "button",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"name": "text",
|
|||
|
|
"required": true,
|
|||
|
|
"label": "用户名",
|
|||
|
|
"placeholder": "请输入用户名"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "password",
|
|||
|
|
"name": "password",
|
|||
|
|
"label": "密码",
|
|||
|
|
"placeholder": "请输入密码",
|
|||
|
|
"required": true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "checkbox",
|
|||
|
|
"name": "rememberMe",
|
|||
|
|
"label": "记住登录"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 提交表单 或 ajax请求 后不关闭弹框
|
|||
|
|
|
|||
|
|
默认情况下，当弹框中配置了form并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`"close": true` 来禁止该默认特性。
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹个表单",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "在弹框中的表单",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"label": "提交表单后不关闭",
|
|||
|
|
"actionType": "submit",
|
|||
|
|
"close": false,
|
|||
|
|
"primary": true,
|
|||
|
|
"type": "button"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "ajax请求后不关闭",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"primary": true,
|
|||
|
|
"type": "button",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"name": "text",
|
|||
|
|
"required": true,
|
|||
|
|
"label": "用户名",
|
|||
|
|
"placeholder": "请输入用户名"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "password",
|
|||
|
|
"name": "password",
|
|||
|
|
"label": "密码",
|
|||
|
|
"required": true,
|
|||
|
|
"placeholder": "请输入密码"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "checkbox",
|
|||
|
|
"name": "rememberMe",
|
|||
|
|
"label": "记住登录"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## feedback 反馈弹框
|
|||
|
|
|
|||
|
|
feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进行反馈操作
|
|||
|
|
|
|||
|
|
### 基本使用
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "Feedback",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2",
|
|||
|
|
"tooltip": "点击我后会发送一个请求，请求回来后，弹出一个框。",
|
|||
|
|
"feedback": {
|
|||
|
|
"title": "操作成功",
|
|||
|
|
"body": "xxx 已操作成功"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 弹框中配置 feedback
|
|||
|
|
|
|||
|
|
#### 关闭 feedback 弹框时，同时关闭上层弹框
|
|||
|
|
|
|||
|
|
当你在弹框中配置了feedback，操作之后，你希望关闭当前feedback弹框同时，关闭上层的弹框，具体有两种方式
|
|||
|
|
|
|||
|
|
##### 1. 不请求接口，直接关闭
|
|||
|
|
|
|||
|
|
`feedback`的`actions`中配置 `"actionType": "close"` 的按钮
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹一个框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"name": "text",
|
|||
|
|
"required": true,
|
|||
|
|
"label": "用户名",
|
|||
|
|
"placeholder": "请输入用户名"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "password",
|
|||
|
|
"name": "password",
|
|||
|
|
"label": "密码",
|
|||
|
|
"required": true,
|
|||
|
|
"placeholder": "请输入密码"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "checkbox",
|
|||
|
|
"name": "rememberMe",
|
|||
|
|
"label": "记住登录"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "提交表单 Feedback",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"feedback": {
|
|||
|
|
"body": "feedback弹框中，不请求接口了，直接点击按钮关闭",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "close",
|
|||
|
|
"label": "关闭"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "ajax请求 Feedback",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"close": true,
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1",
|
|||
|
|
"feedback": {
|
|||
|
|
"body": "feedback弹框中，不请求接口了，直接点击按钮关闭",
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "close",
|
|||
|
|
"label": "关闭"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
##### 2. 请求接口，请求成功后，关闭所有弹框
|
|||
|
|
|
|||
|
|
需要在 feedback 的 `body` 中添加Form组件，并配置`"actionType": "confirm"`，
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹一个框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "text",
|
|||
|
|
"name": "text",
|
|||
|
|
"required": true,
|
|||
|
|
"label": "用户名",
|
|||
|
|
"placeholder": "请输入用户名"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "password",
|
|||
|
|
"name": "password",
|
|||
|
|
"label": "密码",
|
|||
|
|
"required": true,
|
|||
|
|
"placeholder": "请输入密码"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "checkbox",
|
|||
|
|
"name": "rememberMe",
|
|||
|
|
"label": "记住登录"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "confirm Feedback",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"feedback": {
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "tpl",
|
|||
|
|
"tpl": "点击确认，请求接口，接口请求成功后，关闭弹框"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"label": "确认",
|
|||
|
|
"primary": true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "ajax Feedback",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"close": true,
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
|||
|
|
"feedback": {
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "tpl",
|
|||
|
|
"tpl": "点击确认，请求接口，接口请求成功后，关闭弹框"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"label": "确认",
|
|||
|
|
"primary": true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> 注意上面的例子：如果你的触发`feedback`的按钮`actionType`为`ajax`时，为需要额外在按钮上配置`"close": true`
|
|||
|
|
|
|||
|
|
#### 关闭 feedback 弹框时，不同时关闭上层弹框
|
|||
|
|
|
|||
|
|
改场景只适用于**不请求接口关闭弹框**的场景，需要在feedback层添加`"skipRestOnCancel": true`
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "弹一个框",
|
|||
|
|
"actionType": "dialog",
|
|||
|
|
"dialog": {
|
|||
|
|
"title": "提示",
|
|||
|
|
"body": {
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "tpl",
|
|||
|
|
"tpl": "这是一个简单的弹框"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "confirm",
|
|||
|
|
"label": "Feedback",
|
|||
|
|
"feedback": {
|
|||
|
|
"body": "这是一个feedback弹框",
|
|||
|
|
"skipRestOnCancel": true,
|
|||
|
|
"actions": [
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"actionType": "close",
|
|||
|
|
"label": "关闭"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 根据条件显示 feedback
|
|||
|
|
|
|||
|
|
可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除2时才显示弹框。
|
|||
|
|
|
|||
|
|
```schema:height="100" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "button",
|
|||
|
|
"label": "条件feedback",
|
|||
|
|
"actionType": "ajax",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1",
|
|||
|
|
"feedback": {
|
|||
|
|
"visibleOn": "!(this.date % 2)",
|
|||
|
|
"title": "操作成功",
|
|||
|
|
"body": "当前时间戳: <code>${date}</code>"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 属性表
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| --------------- | -------------------------------- | ------------------ | ------------------------------------------------------------------------------ |
|
|||
|
|
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
|
|||
|
|
| title | [SchemaNode](./types-schemanode) | | 弹出层标题 |
|
|||
|
|
| body | [SchemaNode](./types-schemanode) | | 往 Dialog 内容区加内容 |
|
|||
|
|
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
|||
|
|
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
|||
|
|
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
|||
|
|
| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |
|
|||
|
|
| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |
|
|||
|
|
| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |
|
|||
|
|
| actions | Array<[Action](./action)> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |
|
|||
|
|
| data | `object` | | 支持[数据映射](./data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|