Designer Props

Component props parameter configuration guide and complete parameter descriptions.

Mobile designer is the fc-designer-mobile component

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>

Configuration Items

Complete configuration items and descriptions:

Property Name	Description	Type
locale	Multi-language configuration object. Default is Chinese. By setting this property, you can switch to interface text in other languages.	Object
mask	Whether to show component mask layer. Default is true, at which time users cannot operate components. Setting to false allows users to directly operate components in the designer.	boolean
height	Designer component height. Can use strings (e.g., 500px, 100vh) or numbers (e.g., 500). Specifies the display height of the designer.	string|number
menu	Custom left menu list. This configuration will override the designer's default menu list. MenuList should contain the menu items you want to display on the left side of the designer.	MenuList
config	Configure module display state and default rules within the designer. Through this configuration, you can control which modules are visible. See Complete Configuration.	Config
handle	Extended operation buttons at the top of the designer. Handle is an array containing button names and callback functions. Through this configuration, you can add custom operation buttons and specify their behavior.	Handle

config Configuration Items

Configuration Item	Type	Description
fontFamily	Array<string | {label: string, value: string}>	Extended fonts
device	'100%' | string	Configure design area display method
switchType	false | Array<string[]>	Whether component types can be switched, or fields that can be switched to each other
autoActive	boolean	Whether to automatically select dragged components
localeOptions	Array<{value: string, label: string}>	Multi-language types
beforeRemoveRule	(data: { rule: Rule }) => false|void	Pre-delete component event, return false to cancel deletion
beforeActiveRule	(data: { rule: Rule }) => false|void	Pre-select component event, return false to cancel selection
configFormOrder	Array<'base' | 'advanced' | 'props' | 'slots' | 'style' | 'event' | 'validate'>	Order of component configuration items
checkDrag	(drag: {rule: Rule | undefined, menu: DragRule, toRule: Rule, toMenu: DragRule}) => boolean	Determine if component can be dragged in
hotKey	boolean	Whether to enable keyboard shortcuts, enabled by default
autoResetName	boolean	Whether to automatically reset component name when copying, enabled by default
autoResetField	boolean	Whether to automatically reset component field when copying, enabled by default
updateConfigOnBlur	boolean	Right-side configuration update method
useTemplate	boolean	Whether to generate Vue2 syntax template components
formOptions	Object	Define form configuration default values
fieldReadonly	boolean	Configure whether field can be edited
nameReadonly	boolean	Configure whether name can be edited
validateOnlyRequired	boolean	Control whether component validation only shows required validation
hiddenDragMenu	boolean	Hide drag operation buttons
hiddenDragBtn	boolean	Hide drag buttons
componentPermission	ComponentPermission[]	Control component configuration permissions
hiddenMenu	MenuName[]	Hide some menus
hiddenItem	string[]	Hide some components
hiddenFormConfig	string[]	Hide some form configuration items
disabledFormConfig	string[]	Disable some form configuration items
hiddenItemConfig	Object	Hide some component configuration items
disabledItemConfig	Object	Disable some component configuration items
allowDrag	Object	List of components that can be dragged in
denyDrag	Object	List of components that cannot be dragged in
showMenuBar	boolean	Whether to show left side
showSaveBtn	boolean	Whether to show save button
showPreviewBtn	boolean	Whether to show preview button
showConfig	boolean	Whether to show right-side configuration interface
showBaseForm	boolean	Whether to show component's basic configuration form
showComponentName	boolean	Whether to show component number
showControl	boolean	Whether to show component linkage
showJsonPreview	boolean	Whether to show JSON preview button
showCustomProps	boolean	Whether to show custom props button
showPropsForm	boolean	Whether to show component's property configuration form
showStyleForm	boolean	Whether to show component's style configuration form
showEventForm	boolean	Whether to show component's event configuration form
showValidateForm	boolean	Whether to show component's validation configuration form
showFormConfig	boolean	Whether to show form configuration
showDevice	boolean	Whether to show multi-device adaptation options
showInputData	boolean	Whether to show input button
showLanguage	boolean	Whether to show internationalization configuration
exitConfirm	boolean	Confirmation dialog when closing page
appendConfigData	string[] | ((rule: Rule) => Object)	Define formData required for rendering rules
baseRule	extendRule	Rendering rules for basic configuration, can override default rules
validateRule	extendRule	Rendering rules for validation configuration, can override default rules
formRule	extendRule	Rendering rules for form, can override default rules
componentRule	Object	Rendering rules for component configuration, can override default rules
updateDefaultRule	Object	Set component initialization rules

For complete type definitions of configuration items, please refer to the TypeScript data structure documentation: TypeScript Data Structure

Examples

Define Designer Height

Define the form designer component height by setting the height property to '100vh'

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

Hide Sub-form Menu

Hide the "Sub-form" menu option in the form designer interface through the hiddenMenu property of the configuration

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

Hide Specified Components

Hide specific components in the form designer such as sub-forms, groups, tree controls, and tree selectors through the hiddenItem property of the configuration

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

Show Save Button

Enable the save button at the top of the form designer by setting showSaveBtn: true, and define a save method to handle the save event

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