抽屉
适用于页面内容较多或较复杂的场景
基础用法
1. 抽屉组件需要事件触发才能进行展示,因此此处为其准备了一个用于触发抽屉的按钮
2. 拖动抽屉组件到画布中,切换到模态层对抽屉组件进行设计
点击组件层按钮切换到模态层
修改抽屉的内容与样式
3. 声明抽屉需要使用的变量
4. 声明按钮触发的方法
在方法
页签中,新增一个方法,并修改其内容如下:
function showDlg() {
/* 将刚才声明的变量赋值为真 */
this.varSet.view.showDlg = true
}
5. 将变量绑定到抽屉
点击组件层按钮切换到模态层
修改抽屉属性中的开关
,将其配置为刚才添加的方法
6. 将方法绑定到按钮中
选择添加的按钮
,在组件属性栏
中选择事件
,点击添加事件
按钮
绑定方法
中选择刚才新建的方法
7. 效果
未触发抽屉效果
触发抽屉效果
属性设置
开关
:配置用于控制遮罩是否显示
的变量
标题文字
:配置遮罩的标题文字
宽度
:配置遮罩的宽度