开源项目低代码表单设计器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>
相关推荐
Codebee3 小时前
OneCode3.0 VFS分布式文件管理API速查手册
后端·架构·开源
行走在云端z8 小时前
mongodb 开源同步工具介绍
数据库·mongodb·开源
欧雷殿9 小时前
超越 Vibe Coding 的智能研发
低代码·aigc·ai编程
Codebee10 小时前
OneCode 3.0架构深度剖析:工程模块管理与自主UI系统的设计与实现
人工智能·开源·全栈
zzywxc78711 小时前
AI技术正以前所未有的速度重塑职业生态与行业格局,尤其在自动化测试领域,AI驱动的测试框架通过智能化、低代码化重构传统测试流程。
网络·人工智能·经验分享·低代码·重构·实时互动·电脑
时光追逐者18 小时前
一款开源免费、通用的 WPF 主题控件包
开源·c#·.net·wpf
国服第二切图仔19 小时前
【源力觉醒 创作者计划】文心开源大模型ERNIE-4.5系列与Qwen/DeepSeek/GPT-4横向深度测评报告
百度·开源·文心大模型·paddle·gitcode
森焱森1 天前
60 美元玩转 Li-Fi —— 开源 OpenVLC 平台入门(附 BeagleBone Black 驱动简单解析)
c语言·单片机·算法·架构·开源
Albert_Lsk1 天前
【2025/07/11】GitHub 今日热门项目
人工智能·开源·github·开源协议
Codebee1 天前
注解驱动的知识中枢:MCPServer赋能AI业务的技术架构与实践
人工智能·架构·开源