跳到主要内容

对话框

对话框常用于消息提示、操作确认，或在当前页面中完成特定的交互操作。

何时使用​

  • 用户操作需要明确确认，例如：删除、重置、退出等。
  • 中断当前流程并引起用户注意，例如：错误提示、权限警告。
  • 临时性的数据展示或编辑操作，例如：快速编辑、详细信息弹出查看。

一、属性​

1. 功能​

1）标题设置​

  • 可自定义对话框的标题内容。
  • 支持以下三种数据绑定方式：
    • 手动赋值
    • 数据绑定
    • 组件绑定

默认关闭自定义标题：

标题绑定关闭

启用自定义标题后，可完全自定义标题区域布局：

标题自定义示意1 标题自定义示意2

2）展示蒙层​

  • 开启后：对话框弹出时页面其他区域会出现遮罩。
  • 可配置是否允许通过点击蒙层关闭对话框。

示意图：

展示蒙层

3）销毁对话框​

  • 开启后，对话框关闭时会从 DOM 中完全移除，避免资源占用。
  • 适用于不频繁使用的对话框实例。

2. 外观​

1）宽度设置​

  • 可自定义设置对话框的宽度以适配内容展示。

示意图：

设置宽度

二、样式​

组件无特殊样式设置，详见 通用样式。

三、常见使用场景​

1. 基础用法​

适用于基本信息展示、输入收集等操作。

示意图：

基础用法1 基础用法2 基础用法3

2. 消息提示​

用于告知用户操作结果或提示重要信息，如错误、警告等。

示意图：

提示作用1 提示作用2

3. 自定义内容​

可根据业务场景自由定义内容区域，如嵌入表单、图表或其他复杂交互组件。