模态框
模态框作为一个模态对话框的容器,支持向模态框中拖入各种组件,用于在模态框弹出时,用户必须先响应模态框后,才能对其他对象进行操作的场景。
模态对话框功能:当一个模态对话框弹出时,用户想要对模态框以外的应用程序进行操作时,必须先对该对话框进行响应,例如单击“确定”或“取消”按钮等将该对话框关闭。
在标准页面设计界面,从“基本组件 > 布局”中,拖拽“模态框”组件至页面工作区域,如图1。
查看组件帮助
将鼠标放在对应的组件上,单击,可查看组件说明。
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046664.png)
属性
- 数据绑定:通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。
- 基本属性:基本属性通过数据绑定后,在运行时以数据绑定的值为准。
- 标题:模态框的标题。
- 确定按钮文字:模态框的“确定”按钮上的文字。
- 取消按钮文字:模态框的“取消”按钮上的文字。
- 显示Loading:开启后,确定按钮显示loading状态。
- 显示遮罩层:开启后,显示遮罩层。
- 点击遮罩层关闭:开启后,允许单击模态框外的遮罩层关闭模态框。关闭后,必须先对该模态框进行响应,才能将该模态框关闭,例如单击模态框中的按钮(“确定”、“取消”)以及
图标。
- 可拖动:开启后,该容器可拖动。
- 不显示底部:开启后,隐藏“确认”和“取消”按钮区域。
- 显示取消按钮:开启后,显示取消按钮。
- 确定按钮在前:开启后,确认按钮在前。
- 确定按钮禁用:开启后,确认按钮被禁用。
- 懒加载:开启后,弹框不打开不渲染,以提高性能。
- 移动端设置
- 弹出位置:模态框在移动端的显示位置。
- 关闭按钮:是否显示关闭按钮。
- 公共 > 控件名称:当前组件的名称。
- 样式
- 模态框高度:设置模态框的宽度、高度等。
如果模态框高度太大,无法正常显示,可在页面的“样式代码”里添加以下样式代码,即先在样式代码里设置滚动条,然后再将高度改小,如图3所示。
.ivu-modal-body { overflow:auto; }
- 高级设置 > 样式类:当前组件使用的CSS样式类名,可在CSS代码中进行引用。
- 模态框高度:设置模态框的宽度、高度等。
事件
在事件中,显示了组件暴露出来的一些常用事件,供用户实现,来扩展组件的交互。整个页面有加载(on-load)事件,该事件在页面渲染完成后执行,可进行数据初始化操作。更多关于事件的介绍,请参见主要事件说明。
库
在库中,可配置页面需要的依赖库,扩展页面功能。库分为系统预置库和自定义库两种,更多介绍请参见如何引入第三方库。