效果演示

弹窗和侧滑抽屉 - 图1

弹出窗口、侧滑抽屉是Pro版新增的两个容器,分别对应于el-dialog、el-drawer两个组件的封装。

弹出窗口、侧滑抽屉跟其他容器有所区别,需要特别注意以下几点:

  1. 弹出窗口、侧滑抽屉容器及内部组件在表单渲染阶段默认不显示,需要调用VFormRender组件的showDialog、showDrawer方法才会显示;
  2. 弹出窗口、侧滑抽屉容器及内部组件使用一个动态创建的子级VFormRender组件来渲染,子级VFormRender跟父级VFormRender共享全局CSS样式、全局函数、数据源设置、optionData选项对象以及globalDsv全局数据源对象;
  3. 弹出窗口、侧滑抽屉容器内的组件,不能跟容器之外的组件直接交互,需要通过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方法的第三个参数传入
——无