对话框
对话框
可以在不改变当前页面状态的情况下,向用户通知或接受用户的操作,依赖于变量实现显示与隐藏的效果
基础用法
1. 对话框组件需要事件触发才能进行展示,因此此处为其准备了一个用于触发对话框的按钮

2. 拖动对话框组件到画布中,切换到模态层对对话框组件进行设计
点击组件层按钮切换到模态层

修改对话框的内容与样式

3. 声明对话框需要使用的变量

4. 声明按钮触发的方法
在方法
页签中,新增一个方法,并修改其内容如下:

function showDlg() {
/* 将刚才声明的变量赋值为真 */
this.varSet.view.showDlg = true
}
5. 将变量绑定到对话框中
选择添加的按钮
,在组件属性栏
中选择事件
,点击添加事件
按钮

绑定方法
中选择刚才新建的方法

6. 将方法绑定到按钮中
点击组件层按钮切换到模态层

修改对话框属性中的开关
,将其配置为刚才添加的方法

7. 效果
未触发对话框效果

触发对话框效果

属性设置
开关
:配置用于控制对话框是否显示
的变量
标题文字
:配置对话框的标题文字
宽度
:配置对话框的宽度
全屏
:是否全屏
显示遮罩
:是否显示对话框后的灰色遮罩层
