Design Component Slots

FcDesigner supports visual dragging of component slot content areas. Flexibly place and configure components in slots to enhance form design customization.

Before reading this article, see the Extend Components documentation to understand basic concepts.

This feature is only available in the Pro version of the designer. Learn more about Pro version features

Example

A custom component with multiple slots

<template>
  <div>
      <p>Default Slot</p>
      <div>
          <slot></slot>
      </div>
      <p>Content Slot</p>
      <div>
          <slot name="content"></slot>
      </div>
      <p>Footer Slot</p>
      <div>
          <slot name="footer"></slot>
      </div>
  </div>
</template>
<script>
export default {
    name: 'ShopForm',
    props:{
      disabled: Boolean
    }
}
</script>

The component defines three slots:

• default slot
• content slot
• footer slot

Define Drag Rules

Configure slot areas that support dragging through the slot field:

const ShopFormRule = {
    // Menu insertion position
    menu: 'subform',
    // Icon
    icon: 'icon-subform',
    // Name
    label: 'Product Form',
    // ID, must be unique!
    name: 'ShopForm',
    // Whether it can be operated, needs to support dragging so true
    mask: false,
    drag: true,
    // Configure slots
    slot: [
        // Support dragging components into default slot
        'default',
        // Support dragging components into content slot, drag area fixed as sub-form container
        {
            name: 'content',
            // Sub-form component name
            type: 'fcRow'
        },
        // Support dragging components into footer slot
        'footer',
    ]
    // Define component rendering rules
    rule({t}) {
      	// Custom component generation rules
        return {
            type: 'ShopForm',
            props: {},
            children: []
        };
    },
  	// Custom component property configuration
    props() {
        return [
            {
                type: 'switch',
                field: 'disabled',
                title: 'Disabled'
            }
        ];
    }
};

In the slot configuration, the type field defines the container component for the slot area, defaulting to the drag container. Customize type as row or other types to match your needs.

Mount Component and Drag Rules

// Mount component
FcDesigner.addCompoent(ShopForm);
// Mount drag rules
this.$refs.designer.addComponent(ShopFormRule);

These steps let you add custom components and drag rules to the designer, enabling visual dragging of slot area content.