设计器的配置

本文档包含组件的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
mask	是否显示组件遮罩层。默认为 true，此时用户无法操作组件。设置为 false 可以让用户直接操作设计器中的组件。	boolean
height	设计器组件的高度。可以使用字符串（如 500px, 100vh）或数字（如 500）。指定设计器的显示高度。	string|number
menu	自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。MenuList 应包含你希望在设计器左侧显示的菜单项。	MenuList
config	配置设计器内的模块显示状态和默认规则。通过此配置，可以控制哪些模块可见，查看完整配置说明。	Config
handle	设计器顶部的扩展操作按钮。Handle 是一个包含按钮名称和回调函数的数组。通过此配置，可以添加自定义操作按钮并指定其行为。	Handle

config 配置项

配置项	类型	描述
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语法的模板组件
formOptions	Object	定义表单配置默认值
fieldReadonly	boolean	配置field是否可以编辑
nameReadonly	boolean	配置name是否可以编辑
validateOnlyRequired	boolean	控制组件验证是否只显示必填验证
hiddenDragMenu	boolean	隐藏拖拽操作按钮
hiddenDragBtn	boolean	隐藏拖拽按钮
componentPermission	ComponentPermission[]	控制组件的配置权限
hiddenMenu	MenuName[]	隐藏部分菜单
hiddenItem	string[]	隐藏部分组件
hiddenFormConfig	string[]	隐藏表单部分配置项
disabledFormConfig	string[]	禁用表单部分配置项
hiddenItemConfig	Object	隐藏组件的部分配置项
disabledItemConfig	Object	禁用组件的部分配置项
allowDrag	Object	可拖入的组件列表
denyDrag	Object	不可拖入的组件列表
showMenuBar	boolean	是否显示左侧
showSaveBtn	boolean	是否显示保存按钮
showPreviewBtn	boolean	是否显示预览按钮
showConfig	boolean	是否显示右侧的配置界面
showBaseForm	boolean	是否显示组件的基础配置表单
showComponentName	boolean	是否显示组件的编号
showControl	boolean	是否显示组件联动
showJsonPreview	boolean	是否显示json预览按钮
showCustomProps	boolean	是否显示自定义props按钮
showPropsForm	boolean	是否显示组件的属性配置表单
showStyleForm	boolean	是否显示组件的样式配置表单
showEventForm	boolean	是否显示组件的事件配置表单
showValidateForm	boolean	是否显示组件的验证配置表单
showFormConfig	boolean	是否显示表单配置
showDevice	boolean	是否显示多端适配选项
showInputData	boolean	是否显示录入按钮
showLanguage	boolean	是否显示国际化配置
exitConfirm	boolean	关闭页面时确认弹窗
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>