开源项目低代码表单设计器FcDesigner扩展组件分组

在开源项目低代码表单设计器FcDesigner中,您可以通过addMenu方法添加自定义组件分组到左侧组件栏,以便于组织和管理组件。以下是如何使用这个功能的详细说明和示例。

源码地址: Github | Gitee | 文档

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>
相关推荐
zkmall1 小时前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范
YBCarry_段松啓1 小时前
DeerFlow单服务器低成本公网访问
docker·开源·llm
南囝coding2 小时前
不追求完美主义了,先做个垃圾出来!
前端·后端·开源
敖行客 Allthinker3 小时前
深度解析DeepSeek V3.1 :6850 亿参数开源模型如何以 71.6% 编码得分、68 倍成本优势重构全球 AI 竞争格局
人工智能·重构·开源
分布式存储与RustFS15 小时前
RustFS的边缘计算优化方案在5G MEC场景下的实测数据如何?
人工智能·5g·开源·边缘计算·rustfs
LinXunFeng16 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
展信佳_daydayup17 小时前
03 基础篇-润和开发板连接过程
linux·开源·嵌入式
算家计算17 小时前
一句话,AI帮你P图!Qwen-Image-Edit本地部署教程:能转能改能加字
人工智能·开源·aigc
杨杨杨大侠1 天前
第1篇:走进日志框架的世界 - 从HelloWorld到企业级应用
java·开源·apache log4j
Code_流苏1 天前
DeepSeek V3.1深度解析:一个模型两种思维,迈向Agent时代的第一步!
开源·agent·思维·模型设计·deepseek·深度思索·dpv3.1