Dialog 对话框组件

通过注入服务调用 Show 方法弹出窗口进行人机交互

基本用法

通过设置 DialogOption 属性对模态框进行基本属性设置

Demo

弹出复杂组件

通过调用 Show<Counter>() 来弹出一个自定义组件

Demo

本例中弹出对话框中包含一个示例网站的自带 Counter 组件,通过设置 KeepChildrenState 属性来控制弹窗内组件是否保持状态

  • 选择 不保持状态 时,弹窗内的计数器数据关闭弹窗后清零
  • 选择 保持状态 时,弹窗内的计数器数据关闭弹窗后保持

弹窗传参

通过设置 BodyContext 属性值,可以把参数传递给弹窗中的组件内

Demo

本例中点击按钮时设置 BodyContext 值为 我是传参,弹窗内容为自定义组件 DemoComponent,组件内通过级联参数获取到其值

实战应用

本例中通过传递一个主键,在弹窗内的组件通过此主键进行数据查询,并将结果显示在弹窗内

Demo

代码关闭弹窗

本例讲解如何通过代码打开与关闭弹窗

Demo

利用弹窗参数 DialogOption 实例,弹窗弹出后实例中的 Dialog 属性值即为当前弹窗句柄,通过调用其 Toggle/Close 方法即可关闭弹窗

模态对话框

通过 ShowModal 方法弹出线程阻塞模式的对话框

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 更改模态弹窗内数值点击 确认 按钮时数值 更新
  • 更改模态弹窗内数值点击 取消 或者 关闭 按钮时数值 不更新
  • 再次点击弹出模态弹窗时,数值保持一致

实战演练

模拟一个邮件应用,弹窗选择收件人后填入下方的收件人框。

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 通过级联传参 BodyContext 传递 10 到弹窗中初始化数据
  • 选中 Table 组件中的行数据,通过双向绑定对 SelectedRows 数据进行 更新
  • 点击 选中 按钮通过双向绑定对 Emails 数据进行 更新
  • 点击 取消 或者 关闭 按钮时 Emails不更新
  • 再次点击弹出模态弹窗时,组件内行选中状态保持一致
  • 弹窗中未选择用户时禁止关闭弹窗
<Dialog />

DialogOption 属性

Loading...
An error has occurred. This application may no longer respond until reloaded. Reload