Javascript Form.io自定义布局组件

我正在使用Form.iov3.27.1，我正在尝试创建一个自定义布局组件——特别是一个手风琴——我在大部分情况下使用组件示例中提供的概念

我可以使手风琴组件显示在工具箱中，我可以将其拖到窗体上，配置自定义编辑窗体等。我可以保存它，它可以完美地呈现以引导为主题的手风琴

但是，它不允许我将其他组件拖放到内容区域，类似于其他布局组件的行为（即

选项卡

，

列

，

字段集

等）

通过浏览其他布局控件的源代码，我假设我需要扩展

NestedComponent

，而不是

BaseComponent

，但我还不能做到这一点

我觉得我忽略了一些小东西。我似乎不知道如何呈现一个接受其他Form.io组件作为子组件的布局组件

任何人有一个工作的例子或建议，我可以尝试让这个工作？我提前感谢你的帮助

从'formiojs/components/base/base'导入BaseComponent；
从“formiojs/components/nested/NestedComponent”导入NestedComponent；
从“formiojs/组件/组件”导入组件；
从“/Accordian.form”导入*作为编辑表单；
导出默认类AccordionComponent扩展BaseComponent{
/**
*定义此组件的默认JSON模式。我们将从BaseComponent派生
*架构，并提供对该架构的重写。
*@return{*}
*/
静态模式（）{
返回BaseComponent.schema({
类型：“手风琴”，
标签：'Sections'，
输入：false，
键：“手风琴”，
坚持：错，
组成部分：[{
标签：“第1节”，
关键字：“第1节”，
组成部分：[]
}]
});
}
/**
*通过提供“builderInfo”对象将此组件注册到表单生成器。
*/
静态get builderInfo（）{
返回{
标题：“手风琴”，
组：“自定义”，
图标：“fa任务”，
体重：70，
架构：AccordionComponent.schema（）
};
}
/**
*告诉渲染器如何使用DOM操作构建此组件。
*/
构建（）{
this.element=this.ce（'div'{
类：`form group formio component formio component accordion${this.className}`
}, [
此.ce（'app-formio-accordian'{
组件：JSON.stringify（this.component.components）
})
]);
}
elementInfo（）{
返回super.elementInfo（）；
}
getValue（）{
返回super.getValue（）；
}
设置值（值）{
super.setValue（值）；
}
}
//使用表格组件编辑表单。
AccordionComponent.editForm=editForm.default；
//将组件注册到Formio.Components注册表。
组件。添加组件（'accordion'，AccordionComponent）

{{component.label}
我应该能够&apos；拖放表单组件&apos；在这里

手风琴

在功能上与选项卡控件相同，即有利于切换和选择的标题内容。构建

手风琴控件的答案是扩展
TabsComponent
，它内置在
Form.io
中，并重写通过DOM操作构建元素的
createElement
方法。一对其他覆盖（
schema
和
builderInfo
）将元数据提供回
FormBuilder
和瞧

accordion.js
从'formiojs/components/tabs/tabs'导入TabsComponent；
从“/Accordian.form”导入*作为编辑表单；
导出默认类AccordionComponent扩展TabsComponent{
/**
*定义此组件的默认JSON模式。我们将从BaseComponent派生
*架构，并提供对该架构的重写。
*@return{*}
*/
静态模式（）{
返回TabsComponent.schema({
类型：“手风琴”，
标签：'Sections'，
输入：false，
键：“手风琴”，
坚持：错，
组成部分：[{
标签：“第1节”，
关键字：“第1节”，
键入：“制表符”，
组成部分：[]
}]
});
}
/**
*通过提供“builderInfo”对象将此组件注册到表单生成器。
*/
静态get builderInfo（）{
返回{
标题：“手风琴”，
组：“自定义”，
图标：“fa任务”，
体重：70，
架构：AccordionComponent.schema（）
};
}
/**
*告诉构建器如何使用DOM操作构建此组件。
*/
createElement（）{
this.tabs=[]；
this.tabLinks=[]；
这个。bodies=[]；
this.accordion=this.ce（'div'{
id:`accordion-${this.id}`
});
var_this=这个；
this.component.components.forEach（函数（选项卡，索引）{
var isFirst=指数===0；
var tabLink=\u this.ce（'a'{
类别：'卡链接'，
数据_切换：“折叠”，
href:`collapse-${tab.key}`
}，标签）；
_此.addEventListener（tabLink，'click'，函数（事件）{
event.preventDefault（）；
_这个.setTab（索引）；
});
var header=\u this.ce（'div'{
类别：“卡头”
}，[tabLink]）；
var tabPanel=\u this.ce（'div'{
类：“选项卡窗格”，
角色：“tabpanel”，
tabLink:tabLink
});
var tabContent=\u this.ce（'div'{
类：“选项卡内容”
}，[tabPanel]）；
var body=\u this.ce（'div'{
类别：'卡体'，
id:tab.key
}，[tabContent]）；
var content=\u this.ce（'div'{
id:`collapse-${tab.key}`，
类：'collapse'.concat（isFirst？'show'：