开源Vue表单设计器 FcDesigner 组件提供的方法详解

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

通过 refs.designer 可以调用 fc-designer 组件的各种方法来操作和配置设计器。以下是各方法的详细说明及示例：

Vue3

<template>
    <fc-designer ref="designer"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    //注意：需等待组件完成初始化后，方可调用其方法
    onMounted(() => {
        designer.value.addComponent([
            //扩展组件
        ])
    });
</script>

Vue2

<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            this.$refs.designer.addComponent([
                //扩展组件
            ])
        }
    };
</script>

方法

组件实例方法及使用说明：

方法名	描述	类型定义
addComponent	将一个或多个组件模板或拖拽组件添加到设计器，并根据 menu 字段自动归类到对应菜单下。	AddComponent
setMenuItem	将拖拽组件覆盖添加到指定的菜单下，menuName 为目标菜单名称。	(menuName: string, list: MenuList) => void
addMenu	向设计器左侧菜单栏添加一个新的菜单项。	(menu: Menu) => void
setRule	设置表单生成的规则，支持字符串或规则对象数组。	`(rule: string
setOption	设置表单的配置选项（如布局、标签宽度）。 别名方法：setOptions。	(opt: Options) => void
mergeOptions	通过合并方式更新表单配置选项。	(opt: Options) => void
getRule	获取当前表单的渲染规则（数组形式）。	() => Rule[]
getJson	获取当前表单的 JSON 渲染规则（字符串形式）。	() => string
getOption	获取当前表单的配置对象。 别名方法：getOptions。	() => Options
getOptionsJson	获取当前表单的 JSON 配置（字符串形式）。	() => string
getFormData	获取当前表单的 formData 对象。	() => Object
setFormData	设置表单的 formData 对象（用于预填充数据）。	(formData: Object) => void
getDescription	获取表单的层级结构数据。	() => TreeData
getFormDescription	获取表单组件的层级结构数据。	() => TreeData
openPreview	打开表单预览模式。	() => void
openInputData	开启或关闭数据录入模式（true 开启，false 关闭）。	(open: boolean) => void
clearDragRule	清空设计器中的所有表单组件。	() => void
fields	获取设计器中所有字段的名称列表。	() => string[]
triggerActive	选中指定组件（支持规则对象或 field/name/_fc_id）。	`(rule: Rule
clearActiveRule	清除当前选中的组件状态。	() => void
setFormRuleConfig	设置表单配置规则（同 config.formRule）。	(rule: () => Rule[], append: boolean) => void
setBaseRuleConfig	设置组件基础配置规则（同 config.baseRule）。	(rule: () => Rule[], append: boolean) => void
setComponentRuleConfig	设置指定组件的属性配置规则（同 config.componentRule）。	(id: string, rule: () => Rule[], append: boolean) => void
setGlobalData	预设全局数据源（用于设计器）。	(data: GlobalData) => void
setGlobalEvent	预设全局事件（用于设计器）。	(event: GlobalEvent) => void
setGlobalClass	预设全局样式（用于设计器）。	(class: GlobalClass) => void
openGlobalEventDialog	开启全局事件弹窗。	() => void
openGlobalFetchDialog	开启全局数据源弹窗。	() => void
openGlobalClassDialog	开启全局样式弹窗。	() => void

类型定义

// 单组件或组件数组添加
type AddComponent =
    (dragRule: dragRule | dragTemplateRule) => void |
        (dragRule: Array<dragRule | dragTemplateRule>) => void;

// 菜单项操作
type SetMenuItem = (menuName: string, list: MenuList) => void;
type AddMenu = (menu: Menu) => void;

// 规则与配置操作
type SetRule = (rule: string | Rule[]) => void;
type SetOption = (opt: Options) => void;
type MergeOptions = (opt: Options) => void;
type GetRule = () => Rule[];
type GetJson = () => string;
type GetOption = () => Options;
type GetOptionsJson = () => string;

// 表单数据操作
type GetFormData = () => Object;
type SetFormData = (formData: Object) => void;

// 结构数据获取
type GetDescription = () => TreeData;
type GetFormDescription = () => TreeData;

// 视图控制
type OpenPreview = () => void;
type OpenInputData = (open: boolean) => void;

// 设计器操作
type ClearDragRule = () => void;
type Fields = () => string[];
type TriggerActive = (rule: Rule | string) => void;
type ClearActiveRule = () => void;

// 规则配置
type SetFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetValidateRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;

// 全局预设
type SetGlobalData = (data: GlobalData) => void;
type SetGlobalEvent = (event: GlobalEvent) => void;
type SetGlobalClass = (

class

:
GlobalClass
) =>
void;

// 弹窗控制
type OpenGlobalEventDialog = () => void;
type OpenGlobalFetchDialog = () => void;
type OpenGlobalClassDialog = () => void;