设计器的配置

本文档包含组件的props参数配置指南及完整参数说明

移动端设计器是fc-designer-mobile组件

Vue3

<template>
    <fc-designer ref="designer" :height="height" :config="config"/>
</template>
<script setup>
    const designer = ref(null);
    const height = ref('100vh');
    const config = ref({
        showSaveBtn: true
    });
</script>

Vue2

<template>
    <fc-designer ref="designer" :height="height" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                height: '100vh',
                config: {
                    showSaveBtn: true
                },
            };
        },
    };
</script>

配置项

组件支持的完整配置项及说明如下：

属性名	描述	类型
locale	多语言配置对象。默认为中文。通过设置此属性，可以切换到其他语言的界面文本。查看多语言。	Object
field	管理左侧的字段列表，查看管理字段列表。	FieldList
list	管理左侧的表单列表，查看管理表单列表。	FormList
mask	是否显示组件遮罩层。默认为 true，此时用户无法操作组件。设置为 false 可以让用户直接操作设计器中的组件。	boolean
height	设计器组件的高度。可以使用字符串（如 500px, 100vh）或数字（如 500）。指定设计器的显示高度。	string|number
menu	自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。MenuList 应包含你希望在设计器左侧显示的菜单项。查看扩展组件分组。	MenuList
config	配置设计器内的模块显示状态和默认规则。通过此配置，可以控制哪些模块可见，查看完整配置说明。	Config
handle	设计器顶部的扩展操作按钮。Handle 是一个包含按钮名称和回调函数的数组。通过此配置，可以添加自定义操作按钮并指定其行为。查看扩展自定义操作。	Handle
theme	设计器的主题。支持 purple、orange、pink、green 四种主题。通过设置此属性，可以改变设计器的整体视觉风格。查看主题色。	string

config 配置项

配置项	类型	描述
icons	string[]	扩展图标选择，查看图标
fontFamily	Array<string | {label: string, value: string}>	扩展字体，查看扩展字体
device	'100%' | string	配置设计区域显示方式，查看多端适配
switchType	false | Array<string[]>	是否可以切换组件类型,或者可以相互切换的字段，查看自定义组件切换规则
autoActive	boolean	是否自动选中拖入的组件
localeOptions	Array<{value: string, label: string}>	多语言种类，查看多语言
beforeRemoveRule	(data: { rule: Rule }) => false|void	删除组件前置事件, 返回 false 终止删除
beforeActiveRule	(data: { rule: Rule }) => false|void	选中组件前置事件, 返回 false 终止选中
configFormOrder	Array<'base' | 'advanced' | 'props' | 'slots' | 'style' | 'event' | 'validate'>	排序组件配置项的顺序，查看调整右侧配置顺序
checkDrag	(drag: {rule: Rule | undefined, menu: DragRule, toRule: Rule, toMenu: DragRule}) => boolean	判断组件是否可以拖入，查看控制可以拖入容器组件中的组件
hotKey	boolean	是否开启快捷键,默认开启，查看快捷键
autoResetName	boolean	是否在复制时自动重置组件的name,默认开启
autoResetField	boolean	是否在复制时自动重置组件的field,默认开启
updateConfigOnBlur	boolean	右侧配置更新方式
useTemplate	boolean	是否生成vue2语法的模板组件，查看生成Vue组件
formOptions	Object	定义表单配置默认值，查看修改表单默认配置
fieldReadonly	boolean	配置field是否可以编辑，查看管理字段ID
nameReadonly	boolean	配置name是否可以编辑
fieldList	FieldItem[]	field选择项,支持多级，查看管理字段列表
fieldLeafSelectable	boolean	子表单组件是否可以选择fieldList中的最后一级
relationField	boolean	控制子表单组件字段是否和子表单字段联动, 默认开启
validateOnlyRequired	boolean	控制组件验证是否只显示必填验证
varList	VarItem[]	自定义变量列表，查看变量
hiddenDragMenu	boolean	隐藏拖拽操作按钮
hiddenDragBtn	boolean	隐藏拖拽按钮
componentPermission	ComponentPermission[]	控制组件的配置权限
hiddenMenu	MenuName[]	隐藏部分菜单
hiddenItem	string[]	隐藏部分组件
hiddenFormConfig	string[]	隐藏表单部分配置项
hiddenItemConfig	Object	隐藏组件的部分配置项，查看控制组件配置显隐禁用状态
disabledItemConfig	Object	禁用组件的部分配置项，查看控制组件配置显隐禁用状态
allowDrag	Object	可拖入的组件列表，查看控制可以拖入容器组件中的组件
denyDrag	Object	不可拖入的组件列表，查看控制可以拖入容器组件中的组件
ai	Object	AI 模块相关配置，查看AI 表单助理
showAi	boolean	是否显示 AI 模块，查看AI 表单助理
showMenuBar	boolean	是否显示左侧，查看功能模块显隐
showQuickLayout	boolean	是否显示快速排序按钮
showSaveBtn	boolean	是否显示保存按钮
showGridLine	boolean	是否显示辅助线按钮
showPreviewBtn	boolean	是否显示预览按钮，查看阅读模式
showPrintBtn	boolean	是否显示打印按钮，查看打印表单
showConfig	boolean	是否显示右侧的配置界面
showBaseForm	boolean	是否显示组件的基础配置表单
showComponentName	boolean	是否显示组件的编号
showControl	boolean	是否显示组件联动，查看组件联动
showVariable	boolean	是否显示绑定变量，查看变量
showJsonPreview	boolean	是否显示json预览按钮
showCustomProps	boolean	是否显示自定义props按钮
showPageManage	boolean	是否显示模块管理
showAdvancedForm	boolean	是否显示组件的高级配置表单
showPropsForm	boolean	是否显示组件的属性配置表单
showStyleForm	boolean	是否显示组件的样式配置表单
showEventForm	boolean	是否显示组件的事件配置表单
showValidateForm	boolean	是否显示组件的验证配置表单
showFormConfig	boolean	是否显示表单配置
showTemplate	boolean	是否显示左侧的模板列表，查看扩展模板
showDevice	boolean	是否显示多端适配选项，查看多端适配
showInputData	boolean	是否显示录入按钮，查看默认值
showLanguage	boolean	是否显示国际化配置，查看多语言
showLabelConfig	boolean	是否显示标签编辑
exitConfirm	boolean	关闭页面时确认弹窗
checkFieldUnique	boolean	是否检查 field 字段重复
appendConfigData	string[] | ((rule: Rule) => Object)	定义渲染规则所需的formData
baseRule	extendRule	基础配置的渲染规则,可以覆盖默认规则，查看扩展右侧配置规则
validateRule	extendRule	验证配置的渲染规则,可以覆盖默认规则，查看扩展右侧配置规则
formRule	extendRule	表单的渲染规则,可以覆盖默认规则，查看扩展右侧配置规则
componentRule	Object	组件配置的渲染规则,可以覆盖默认规则，查看扩展右侧配置规则
updateDefaultRule	Object	设置组件的初始化规则，查看修改组件默认配置

完整配置项的类型定义可参考 TypeScript 数据结构文档：Ts数据结构

示例

定义设计器的高度

通过设置 height 属性为 '100vh' 来定义表单设计器组件的高度

<template>
    <fc-designer ref="designer" :height="height"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                height: '100vh',
            };
        },
    };
</script>

隐藏子表单菜单

通过配置项的 hiddenMenu 属性，隐藏了表单设计器界面中的“子表单”菜单选项

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    hiddenMenu: ['subform']
                },
            };
        },
    };
</script>

隐藏指定组件

通过配置项的 hiddenItem 属性，隐藏了表单设计器中的子表单、分组、树形控件和树形选择器等特定组件

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    hiddenItem: ['subForm', 'group', 'tree', 'elTreeSelect']
                },
            };
        },
    };
</script>

显示保存按钮

通过设置 showSaveBtn: true 启用了表单设计器顶部的保存按钮，并定义了 save 方法来处理保存事件

<template>
    <fc-designer ref="designer" :config="config" @save="save"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    showSaveBtn: true
                },
            };
        },
        methods: {
            save() {
                // todo
            }
        }
    };
</script>

设置设计器主题

通过设置 theme 属性来改变设计器的整体视觉风格

<template>
    <fc-designer ref="designer" :theme="theme" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                theme: 'purple', // 支持 purple、orange、pink、green
                config: {
                    showSaveBtn: true
                },
            };
        }
    };
</script>

自定义扩展操作

通过 handle 属性添加自定义操作按钮

<template>
    <fc-designer ref="designer" :config="config" :handle="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    showSaveBtn: true
                },
                handle: [
                    {
                        label: '导出JSON',
                        callback: () => {
                            const json = this.$refs.designer.getJson();
                            console.log('表单JSON:', json);
                        }
                    },
                    {
                        label: '导入JSON',
                        callback: () => {
                            // 处理导入逻辑
                            const json = prompt('请输入JSON数据');
                            if (json) {
                                try {
                                    const rules = JSON.parse(json);
                                    this.$refs.designer.setRule(rules);
                                } catch (e) {
                                    alert('JSON格式错误');
                                }
                            }
                        }
                    }
                ]
            };
        }
    };
</script>