抽屉
适用于页面内容较多或较复杂的场景
基础用法
1. 抽屉组件需要事件触发才能进行展示,因此此处为其准备了一个用于触发抽屉的按钮

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

修改抽屉的内容与样式

3. 声明抽屉需要使用的变量

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

function showDlg() {
/* 将刚才声明的变量赋值为真 */
this.varSet.view.showDlg = true
}
5. 将变量绑定到抽屉
点击组件层按钮切换到模态层

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

6. 将方法绑定到按钮中
选择添加的按钮
,在组件属性栏
中选择事件
,点击添加事件
按钮

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

7. 效果
未触发抽屉效果

触发抽屉效果

属性设置
开关
:配置用于控制遮罩是否显示
的变量
标题文字
:配置遮罩的标题文字
宽度
:配置遮罩的宽度
