更新时间:2024-07-11 GMT+08:00
分享

模态框

模态框作为一个模态对话框的容器,支持向模态框中拖入各种组件,用于在模态框弹出时,用户必须先响应模态框后,才能对其他对象进行操作的场景。

模态对话框功能:当一个模态对话框弹出时,用户想要对模态框以外的应用程序进行操作时,必须先对该对话框进行响应,例如单击“确定”或“取消”按钮等将该对话框关闭。

在标准页面设计界面,从“基本组件 > 布局”中,拖拽“模态框”组件至页面工作区域,如图1

图1 模态框

查看组件帮助

将鼠标放在对应的组件上,单击,可查看组件说明。

图2 查看组件说明

属性

  • 数据绑定:通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。
    • 值绑定:设置组件绑定的数据模型,数据模型一般有以下几种。更多介绍,请参见值绑定
      • 自定义:由用户自定义的前端模型,可以在模型树上快速创建自定义字段。
      • 对象:由后台对象模型映射创建,支持选择字段。
      • 服务:由后台服务的出入参数模型创建,分别生成inputParam和outputParam节点。
      • 事件:由后台事件的字段映射创建,并且支持websocket刷新模型数据。
    • 属性值绑定,用于对该组件所有属性的动态设置。当某一属性被动态绑定时,以绑定值为准。更多介绍,请参见属性绑定
  • 基本属性:基本属性通过数据绑定后,在运行时以数据绑定的值为准。
    • 标题:模态框的标题。
    • 确定按钮文字:模态框的“确定”按钮上的文字。
    • 取消按钮文字:模态框的“取消”按钮上的文字。
    • 显示Loading:开启后,确定按钮显示loading状态。
    • 显示遮罩层:开启后,显示遮罩层。
    • 点击遮罩层关闭:开启后,允许单击模态框外的遮罩层关闭模态框。关闭后,必须先对该模态框进行响应,才能将该模态框关闭,例如单击模态框中的按钮(“确定”、“取消”)以及图标。
    • 可拖动:开启后,该容器可拖动。
    • 不显示底部:开启后,隐藏“确认”和“取消”按钮区域。
    • 显示取消按钮:开启后,显示取消按钮。
    • 确定按钮在前:开启后,确认按钮在前。
    • 确定按钮禁用:开启后,确认按钮被禁用。
    • 懒加载:开启后,弹框不打开不渲染,以提高性能。
  • 移动端设置
    • 弹出位置:模态框在移动端的显示位置。
    • 关闭按钮:是否显示关闭按钮。
  • 公共 > 控件名称:当前组件的名称。
  • 样式
    • 模态框高度:设置模态框的宽度、高度等。

      如果模态框高度太大,无法正常显示,可在页面的“样式代码”里添加以下样式代码,即先在样式代码里设置滚动条,然后再将高度改小,如图3所示。

      .ivu-modal-body {
      overflow:auto;
      }
      图3 模态框样式
    • 高级设置 > 样式类:当前组件使用的CSS样式类名,可在CSS代码中进行引用。

事件

在事件中,显示了组件暴露出来的一些常用事件,供用户实现,来扩展组件的交互。整个页面有加载(on-load)事件,该事件在页面渲染完成后执行,可进行数据初始化操作。更多关于事件的介绍,请参见主要事件说明

在库中,可配置页面需要的依赖库,扩展页面功能。库分为系统预置库和自定义库两种,更多介绍请参见如何引入第三方库

相关文档