弹窗组件

在设计器中，您可以创建和管理弹窗组件，以便在表单中按需打开和使用。弹窗可用于展示额外信息、接受用户输入或进行其他交互操作。

数据结构

打开弹窗

使用 api.open 方法可以打开指定的弹窗。id 为弹窗的ID，formData 可选，用于设置弹窗中的默认表单值。

type Open = (id: string, formData?: Object, onSubmit?: (formData: Object, api: Api) => void) => void;

关闭弹窗

使用 api.close 方法可以关闭指定的弹窗。

type Close = (id: string) => void;

打开弹窗

在组件的事件中调用 api.open 方法即可打开弹窗。例如：

function onChange($inject) {
    $inject.api.open('ref_F2vulxvqc841dac');
}

手动关闭弹窗

在组件的事件中调用 api.close 方法即可关闭弹窗。例如：

function onChange($inject) {
    $inject.api.close('ref_F2vulxvqc841dac');
}

打开弹窗并设置表单默认值

api.open 方法的第二个参数可以设置弹窗表单的默认值。例如：

function change($inject) {
    $inject.api.open('ref_F2vulxvqc841dac', {
        name: 'name'
    });
}

监听弹窗表单的提交事件

api.open 方法的第三个参数可以设置表单提交回调。例如：

$inject.api.open('ref_F2vulxvqc841dac', {
        name: 'name'
    }, (formData, api) => {
    // todo
});

获取弹窗中表单数据

通过弹窗组件的 fapi 可以操作子表单。例如：

const api = $inject.api.top.el('ref_F2vulxvqc841dac').fapi;
const formData = api.formData();

注意: 必须在弹窗渲染后才可以获取

提交表单

通过弹窗组件的 submit 事件可以提交表单。例如：

function submit($inject) {
    //todo 提交表单
}

在弹窗中触发最外层表单的提交

使用 api.top.submit 方法可以手动触发最外层表单的提交。例如：

function confirm($inject) {
    $inject.api.top.submit();
}

Props

属性名	类型	默认值	说明
formData	Object	-	表单数据对象
options	Object	{ submitBtn: false, resetBtn: false }	表单配置选项
rule	Array	-	表单生成规则
autoClose	Boolean	true	是否自动关闭对话框
footer	Boolean	true	是否显示底部按钮
preview	Boolean	-	是否为预览模式
disabled	Boolean	-	是否禁用表单
modelValue	Object	-	双向绑定的表单数据
formCreateInject	Object	-	FormCreate注入对象

Events

事件名	参数	说明
confirm	fapi	确认按钮点击事件
submit	formData, fapi, close	表单提交成功事件
validateFail	e, fapi	表单验证失败事件
update:modelValue	formData	表单数据更新事件

Methods

方法名	参数	说明	返回值
formChange	-	表单数据变化处理	-
open	formData, handleSubmit	打开对话框	-
close	-	关闭对话框	-
handleConfirm	-	确认按钮点击处理	-

Data

数据名	初始值	说明
visible	false	对话框显示状态
max	false`	是否最大化
fapi	{}	表单API实例
value	{}	表单数据值
formRule	[]	表单规则
handleSubmit	undefined	提交处理函数
Form	markRaw(formCreateInject.form.$form())	Form组件实例