我正在使用Form.io v3.27.1，并且我正在尝试创建一个自定义布局组件 - 特别是手风琴 - 我在很大程度上使用CheckMatrix组件示例中提供的概念。
我可以让手风琴组件显示在工具箱中，我可以将它拖到表单上，使用自定义编辑表单等配置它。我可以保存它，它完美地呈现了一个以 Bootstrap 为主题的手风琴。
然而，它没有做的是允许我将其他组件拖放到内容区域中，类似于其他布局组件的行为（即Tabs，Columns等Fieldset）。
我假设通过浏览我需要扩展的其他布局控件的源代码来NestedComponent代替BaseComponent，但我还不能完成这项工作。
我觉得我忽略了一些小东西。我似乎无法弄清楚如何呈现一个接受其他 Form.io 组件作为子组件的布局组件。
任何人都有一个可行的例子或建议我可以尝试让它工作吗？我提前感谢您的帮助！
import BaseComponent from 'formiojs/components/base/Base';
import NestedComponent from 'formiojs/components/nested/NestedComponent';
import Components from 'formiojs/components/Components';
import * as editForm from './Accordian.form';
export default class AccordionComponent extends BaseComponent {
/**
* Define what the default JSON schema for this component is. We will derive from the BaseComponent
* schema and provide our overrides to that.
* @return {*}
*/
static schema() {
return BaseComponent.schema({
type: 'accordion',
label: 'Sections',
input: false,
key: 'accordion',
persistent: false,
components: [{
label: 'Section 1',
key: 'section1',
components: []
}]
});
}
/**
* Register this component to the Form Builder by providing the "builderInfo" object.
*/
static get builderInfo() {
return {
title: 'Accordion',
group: 'custom',
icon: 'fa fa-tasks',
weight: 70,
schema: AccordionComponent.schema()
};
}
/**
* Tell the renderer how to build this component using DOM manipulation.
*/
build() {
this.element = this.ce('div', {
class: `form-group formio-component formio-component-accordion ${this.className}`
}, [
this.ce('app-formio-accordian', {
components: JSON.stringify(this.component.components)
})
]);
}
elementInfo() {
return super.elementInfo();
}
getValue() {
return super.getValue();
}
setValue(value) {
super.setValue(value);
}
}
// Use the table component edit form.
AccordionComponent.editForm = editForm.default;
// Register the component to the Formio.Components registry.
Components.addComponent('accordion', AccordionComponent);<div class="accordion" id="formioAccordionPreview" *ngIf="components">
<div class="card" *ngFor="let component of components; first as isFirst">
<div class="card-header" id="heading-{{component.key}}">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapse-{{component.key}}">{{component.label}}</button>
</h2>
</div>
<div id="collapse-{{component.key}}" class="collapse" [class.show]="isFirst" aria-labelledby="heading-{{component.key}}" data-parent="#formioAccordionPreview">
<div class="card-body">
<p>I should be able to 'Drag and Drop a form component' here.</p>
</div>
</div>
</div>
</div>