# Custom Component

The custom component is a scope slot, which allows you to import your own custom content to the form, more information about scope slot please refer to Scope Slot

Custom component is displayed in form designer,and used in form generator.

# Import Custom Component

  1. Drag and drop'Custom'to editor zone.

  1. Select a type accord to what you nedd.

  2. You can a quick look by click on'Generate Code',and then put you own code in the custom section.

<!-- Add the code as below -->
<fm-generate-form>
  <template slot="blank_1565316398399" slot-scope="scope">
    <!-- custom section -->
    <!-- binding data with v-model="scope.model.blank_1565316398399"  -->
    Width:<el-input v-model="scope.model.blank_1565316398399.width" style="width: 100px"></el-input>
    Height:<el-input v-model="scope.model.blank_1565316398399.height" style="width: 100px"></el-input>
  </template>
</fm-generate-form>
  1. Preview View

# Import Constant Content

Constant content is the data that dont need to bind data.Uncheck 'Data Binding' in 'Attribute Action'

  1. Drag and drop'Custom'to editor zone, Uncheck 'data binding'

  2. Modify the code generated by the Generator thought click on'Generate Code'.

<fm-generate-form 
  :data="jsonData" 
  :remote="remoteFuncs" 
  :value="editData" 
  ref="generateForm"
>
    <template slot="blank" slot-scope="scope">
      <!-- Custom section -->
      put constant content here 
    </template>
</fm-generate-form>
  1. Preview View

  1. You can get the constant content thought click on 'Get Json'
{
  "input_1566990348038": ""
}