弹窗组件

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

数据结构

打开弹窗

使用 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();
}