Skip to content

弹窗组件

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

dialog.png

数据结构

打开弹窗

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

ts
type Open = (id: string, formData?: Object) => void;

关闭弹窗

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

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

打开弹窗

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

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

手动关闭弹窗

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

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

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

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

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

提交表单

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

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

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

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

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