效果演示

弹出窗口、侧滑抽屉是Pro版新增的两个容器,分别对应于el-dialog、el-drawer两个组件的封装。
弹出窗口、侧滑抽屉跟其他容器有所区别,需要特别注意以下几点:
- 弹出窗口、侧滑抽屉容器及内部组件在表单渲染阶段默认不显示,需要调用VFormRender组件的showDialog、showDrawer方法才会显示;
- 弹出窗口、侧滑抽屉容器及内部组件使用一个动态创建的子级VFormRender组件来渲染,子级VFormRender跟父级VFormRender共享全局CSS样式、全局函数、数据源设置、optionData选项对象以及globalDsv全局数据源对象;
- 弹出窗口、侧滑抽屉容器内的组件,不能跟容器之外的组件直接交互,需要通过getParentFormRef()方法获取到父级VFormRender才可以进行交互。
需要注意的是,弹窗/抽屉可以多级打开,多级弹窗/抽屉的嵌套关系不是由设计阶段决定的,而是在渲染阶段由showDialog/showDrawer的调用关系决定,比如在弹窗A调用showDialog显示B弹窗,则A为B弹窗的父级,在弹窗B调用showDialog显示C弹窗,则B为C弹窗的父级,以此类推。
交互事件
交互事件可在表单设计器中编写事件处理代码。
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| onOkButtonClick | 当确认按钮点击时触发 | ——无 |
| onCancelButtonClick | 当取消按钮点击时触发 | ——无 |
| onDialogOpened | 当弹窗打开后触发 | ——无 |
| onDrawerOpened | 当抽屉打开后触发 | ——无 |
API方法
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| getFormRef | 获取本级VFormRender组件 | ——无 |
| getParentFormRef | 获取父级VFormRender组件 | ——无 |
| getTopFormRef | 多级弹窗时,获取最顶级VFormRender组件 | ——无 |
| close | 关闭弹窗或抽屉 | ——无 |
| getWidgetRef | 获取弹窗或抽屉中的组件实例 | (widgetName, showError): widgetName,组件名称showError=true/false,如组件不存在是否显示错误 |
| getExtraData | 获取传入的外部数据, 该数据由showDialog/showDrawer方法的第三个参数传入 |
——无 |
