在开源项目低代码表单设计器FcDesigner中,您可以通过addMenu
方法添加自定义组件分组到左侧组件栏,以便于组织和管理组件。以下是如何使用这个功能的详细说明和示例。
addMenu
用于向组件栏中添加新的分组。
参数
name:分组的唯一标识符,字符串类型。
title:分组的显示名称,字符串类型。
list:分组中包含的组件拖拽规则列表,数组类型。
js
<template>
<fc-designer ref="designer" />
</template>
<script>
export default {
mounted() {
// 添加业务组件分组
this.$refs.designer.addMenu({
name: 'shop',
title: '业务组件',
list: [...]
});
}
}
</script>
内置组件分组
设计器中预定义了几个默认的组件分组,您可以根据需要使用或扩展这些分组:
- 模板 (template): 包含用于设计表单的基本模板组件。
- 基础组件 (main): 提供表单设计中常用的基础组件,如输入框、按钮等。
- 子表单组件 (subform): 用于创建和管理子表单的组件。
- 辅助组件 (aide): 包含辅助功能组件,如提示信息、动态显示组件等。
- 布局组件 (layout): 负责表单布局和排列的组件,如行、列等布局组件。
动态加载组件
您可以动态加载组件到分组中。例如,通过异步请求从服务器获取组件列表并添加特定分组:
js
<template>
<fc-designer ref="designer" />
</template>
<script>
export default {
async mounted() {
const response = await fetch('/api/custom-components');
const customComponents = await response.json();
this.$refs.designer.addMenu({
name: 'dynamicGroup',
title: '动态组件',
list: customComponents.map(comp => ({
name: comp.id,
title: comp.label
}))
});
}
}
</script>