开源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>

方法

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

类型定义

// 单组件或组件数组添加
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;