Designer Events

Component event listening methods and event details.

Vue3

<template>
    <fc-designer @save="handleSave"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    function handleSave(data) {
        // Save design rules
    }
</script>

Vue2

<template>
    <fc-designer @save="handleSave"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleSave(data) {
                // Save design rules
            }
        }
    };
</script>

Events

Component event list:

Event Name	Description	Parameter Description
active	Triggered when component is selected	rule: Rule - Rule object of selected component
copy	Triggered when component is copied	rule: Rule - Rule object of copied component
delete	Triggered when component is deleted	rule: Rule - Rule object of deleted component
drag	Triggered when new component is dragged into designer	e: Object - Contains drag rule and component information
inputData	Triggered when data is saved in data entry mode	formData: Object - Currently entered form data
save	Triggered when save button is clicked	data: {rule: string, options: string} - Contains current form rules and configuration
clear	Triggered when design form is cleared	-
changeDevice	Triggered when display mode is changed	-
copyRule	Triggered when rule is copied	rule: Object - Rule object that was copied
pasteRule	Triggered when rule is pasted	rule: Object - Rule object that was pasted
previewSubmit	Triggered when form is submitted in preview dialog	formData: Object - Submitted form data api: Object - Form API object
previewReset	Triggered when form is reset in preview dialog	api: Object - Form API object
changeField	Triggered when component's field ID is modified	e: Object - Contains field ID and component rule

Examples

Listen to Component ID Changes

Listen to the changeField event to get real-time form component ID (field) change information, including new ID, old ID, and component rule:

<template>
    <fc-designer @changeField="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handle({field, oldField, rule}) {
                // TODO
            }
        }
    };
</script>

Listen to Form Submission in Preview Dialog

By listening to the previewSubmit event, you can capture data generated when submitting forms in the preview dialog of the form designer, enabling saving form data or other custom processing logic.

<template>
    <fc-designer @previewSubmit="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handle({formData, api}) {
                // Save data
            }
        }
    };
</script>

Type Definitions

Expand

// Component operation related events
type Active = (rule: Rule) => void;
type Copy = (rule: Rule) => void;
type Delete = (rule: Rule) => void;
type Drag = (e: { dragRule: Object, item: Object }) => void;

// Data operation related events
type InputData = (formData: Record<string, Object>) => void;
type InputPageData = (formData: Record<string, Object>) => void;
type Save = (data: { rule: string, options: string }) => void;
type Clear = () => void;

// Interface operation related events
type ChangeDevice = () => void;
type SwitchForm = () => void;

// Rule operation related events
type CopyRule = (rule: Object) => void;
type PasteRule = (rule: Object) => void;

// Preview related events
type PreviewSubmit = (formData: Record<string, Object>, api: Object) => void;
type PreviewReset = (api: Object) => void;