Dialog 对话框
代码演示
按钮的样式，默认使用
组件类型
反馈类对话框
用于用户进行了一个操作，需传达重要信息，告知用户当前状况的情况。
确认类对话框
用于用户进行了一个操作，后果比较严重，需要用户二次确认的情况。 例如 退出、删除、清空等操作
输入对话框
用于用户进行了一个操作，需输入下一步操作的必要信息。 例如 输入密码
带图片对话框
对话框中可以插入图片元素，并且自定义位置。
组件状态
文字按钮、水平基础按钮、垂直基础按钮、多按钮、附带关闭按钮
组件用法
命令行调用
Dialog Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| className | String | - | 类名 | N |
| style | Object | - | 样式，TS 类型：React.CSSProperties |
N |
| actions | TNode | - | 操作栏。TS 类型：Array<ButtonProps>，Button API Documents。详细类型定义 |
N |
| buttonLayout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N |
| cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：string | ButtonProps | TNode | null，Button API Documents。通用类型定义。详细类型定义 |
N |
| closeBtn | Boolean | false | 多按钮排列方式。可选项：true/false | N |
| closeOnOverlayClick | Boolean | false | 点击蒙层时是否触发关闭事件 | N |
| confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：string | ButtonProps | TNode | null。通用类型定义 |
N |
| content | TNode | - | 内容。TS 类型：string | TNode。通用类型定义 |
N |
| destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N |
| middle | TElement | - | 中间自定义内容。TS 类型：TNode。通用类型定义 |
N |
| overlayProps | Object | {} | 透传至 Overlay 组件。TS 类型：OverlayProps，Overlay API Documents。详细类型定义 |
N |
| preventScrollThrough | Boolean | true | 防止滚动穿透 | N |
| showOverlay | Boolean | true | 是否显示遮罩层 | N |
| title | TNode | - | 标题。TS 类型：string | TNode。通用类型定义 |
N |
| top | TElement | - | 顶部自定义内容。TS 类型：TNode。通用类型定义 |
N |
| visible | Boolean | - | 控制对话框是否显示 | N |
| width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N |
| zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N |
| onCancel | Function | TS 类型：(context: { e: MouseEvent }) => void如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 |
N | |
| onClose | Function | TS 类型：(context: DialogCloseContext) => void关闭事件，点击 取消按钮 或 点击蒙层 时触发。详细类型定义。 type DialogEventSource = 'cancel' | 'overlay' | 'close-btn'interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent } |
N | |
| onClosed | Function | TS 类型：() => void对话框消失动画效果结束后触发 |
N | |
| onConfirm | Function | TS 类型：(context: { e: MouseEvent }) => void如果“确认”按钮存在，则点击“确认”按钮时触发 |
N | |
| onOverlayClick | Function | TS 类型：(context: { e: MouseEvent }) => void如果蒙层存在，点击蒙层时触发 |
N |
DialogOptions
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N |
| style | Object | - | 弹框 style 属性，输入 CSSStyleDeclaration.cssText。TS 类型：Styles。通用类型定义 |
N |
Omit<DialogProps, 'attach'> |
- | - | 继承 Omit<DialogProps, 'attach'> 中的全部属性 |
N |
DialogInstance
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| destroy | - | - | 必需。销毁弹框 |
| hide | - | - | 必需。隐藏弹框 |
| show | - | - | 必需。显示弹框 |
| update | (props: DialogOptions) |
- | 必需。更新弹框内容 |
dialog 或 DialogPlugin
| 参数名称 | 参数类型 | 参数默认值 | 参数描述 |
|---|---|---|---|
| options | - | - | TS 类型：DialogOptions |
插件返回值：DialogInstance
dialog.confirm 或 DialogPlugin.confirm
| 参数名称 | 参数类型 | 参数默认值 | 参数描述 |
|---|---|---|---|
| options | - | - | TS 类型：DialogOptions |
dialog.alert 或 DialogPlugin.alert
| 参数名称 | 参数类型 | 参数默认值 | 参数描述 |
|---|---|---|---|
| options | Object | - | TS 类型：Omit<DialogOptions, 'cancelBtn'> |
何时使用
需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。
组件搭配使用
与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。
常见用法
用于较为重要的信息提示。
用于较为重要的信息提示，且需要用户决定。
推荐/慎用示例
确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。
相似组件
| 组件名 | 何时使用 |
|---|---|
| 轻提示 | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 |
| 消息通知 | 当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 |
Vue 2
Vue 3
React
Flutter
Design
MiniProgram
WeCom Group
Welcome to contact us
