Extending Components

FormCreate supports generating and using any Vue component in forms. Whether it's a simple UI component or complex custom logic, easily integrate it into forms through the following methods.

Through the type field, you can generate any Vue component or native HTML tag, for example {type: 'ElButton'} generates a component, {type: 'div'} generates an HTML element.

Note

Before custom components are rendered, they must be mounted or registered through global or local methods. See Mount or Register.

As long as the name property is defined in the generation rule, get the component rule through the api.component(name) method, making it convenient to dynamically operate the component in the form.

Encapsulating Custom Components

Create a new Title.vue file and develop the functionality and styles of the title component.

<template>
   <div class="_fc-title" :class="size || 'h2'" :style="textStyle">
      {{ title }}
   </div>
</template>
<script>
   import {defineComponent} from 'vue';
   export default defineComponent({
      name: 'TestComponent',
      data() {
         return {};
      },
      props: {
         title: String,
         size: String,
         align: String,
         //FormCreate automatically injects some useful parameters
         //into formCreateInject when generating custom components
         formCreateInject: Object,
      },
      computed: {
         textStyle() {
            return {
               textAlign: this.align || 'left',
            }
         }
      }
   });
</script>

Component Mounting Methods

Custom components generated through FormCreate must be mounted first. There are two mounting methods: global mounting and local mounting.

Global Mounting

Global mounting applies to the entire Vue application. With this method, components can be used anywhere in the application.

app.component('TestComponent', TestComponent);

Local Mounting

Local mounting applies to specific form instances. This method makes components available only in specific forms, using the formCreate.component() method for mounting.

formCreate.component('TestComponent', TestComponent);

Generating Custom Components Through Tags

The following is an example of generating components through tags:

const rule = {
    type: 'TestComponent', 
    name: 'title',
    props: {
      title: 'Custom Title'
   }
}

Using component Configuration Item to Directly Generate Components

If you don't want to mount components in advance, directly specify components in generation rules through the component configuration item. This way, components can be used in forms without explicit mounting.

const rule = {
   type: 'TestComponent',
   component: TestComponent,
   name: 'title',
   props: {
      title: 'Custom Title'
   }
};

Note

Components rendered using the component method do not support JSON serialization and cannot be directly converted to JSON data.

Dynamically Modifying Rules

Use the api.getRule() method to get generation rules and dynamically modify component properties:

api.getRule('title').props.title = 'My Title'

This method is flexible and suitable for adjusting component behavior at runtime according to business logic.

Examples

Generating UI Framework Built-in Components

Generating Custom Components

Interacting with Forms Using Auto-injected Parameters

The following example shows how to interact with forms using auto-injected parameters:

By mastering the generation and operation methods of custom components above, implement almost any complex form requirements in FormCreate. Whether it's a simple button or complex dynamic form items.