Extend Custom Form Components

Use custom form components to implement business-specific form controls. This guide shows how to define and use custom form components, including importing, mounting components, and setting their drag rules.

Custom Form Component Specifications

Custom Form Components

Import and Mount Custom Components

Import and register custom components first. Example of how to import and mount a custom UserSelect component into the FcDesigner designer:

1. Import and Mount Custom Component

Import and register custom components. Example of how to import and mount a custom UserSelect component into the FcDesigner designer:

// Import form component
import UserSelect from './userSelect.vue';
import FcDesigner from '@form-create/designer';

// Mount custom component
FcDesigner.component('UserSelect', UserSelect);
// Or mount globally
app.component('UserSelect', UserSelect);

2. Define Component Drag Rules

Drag rules configure and display the properties and behavior of custom components in the designer. Example defining a custom form component named UserSelect:

import uniqueId from '@form-create/utils/lib/unique';

const userSelectRule = {
    // Menu insertion position
    menu: 'main',
    // Icon
    icon: 'icon-select',
    // Name
    label: 'User Select',
    // ID, must be unique!
    name: 'UserSelect',
    // Whether it can be operated, recommended true except for container components!
    mask: true,
    // Fixed
    input: true,
    // Support component validation, value type
    validate: ['string'],
    // Define component events
    event: ['change'],
    // Define component rendering rules
    rule({t}) {
      	// Component generation rule
        return {
            type: 'UserSelect',
            // field cannot be duplicated!!!
            field: uniqueId(),
            title: 'User Select',
            info: '',
            $required: false,
            props: {},
        };
    },
  	// Component property configuration
    props(_, {t}) {
        return [{
            type: 'switch',
            title: 'Disabled',
            field: 'disabled'
        }];
    }
};

3. Mount Component Drag Rules

After defining drag rules, mount these rules to the designer:

// Mount drag rules to designer
this.$refs.designer.addComponent(userSelectRule);