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...