component.md

Components

MakingForm

You can create a form by drag an drop the component from left side to the design area.

API

Props

name	description	type	default
preview	display preview button.	Boolean	fasle
generate-json	display generate json button.	Boolean	false
generate-code	display generate code button.	Boolean	false
clearable	display clearable button.	Boolean	false
upload	display upload button.	Boolean	false
basic-fields	Configure the component on the left, for default it will show all the basic fields.	Array	['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']
advance-fields	configure the component on the left, for default it will show all the advanced fields	Array	['blank', 'imgupload', 'editor', 'cascader']
layout-fields	configure the layout on the left, for default it will show all the layout	Array	['grid']

Slots

name	description
action	Custom area at the top of the designer.

Methods

You can get an instance of GenerateForm with ref, and invoke the instance method.

name	description	parameter
getJSON	Get the JSON data generated by the form generator	-
getHtml	Get the html code generated by the form generator	-
setJSON	Set the configuration for for designer	(value) the Json data get via getJson function
clear	clear components	-

Example

Custom Button

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- Custom operation area slot -->
      <el-button type="text" icon="el-icon-upload">save</el-button>
    </template>
  </fm-making-form>
</template>

Component Configuration

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

Instance Methods

<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>

const json = this.$refs.makingform.getJSON()

GenerateForm

The JSON data that generated by the Form generator You can create a form rapidly with the JSON data created by the form generator,and you also can validate and get the form data by just click a button.

API

Props

name	description	type	default
data	JSON data used to create a form	Object	-
value	Form data	Object	-
remote	remote function configure in form generator	Object	{}

Events

name	description	callback
on-change	called when form data changed	field: field id of the changed dada value: the new value data: form data

Methods

You can get an instance of GenerateForm with ref , and invoke the instance method

name	description	parameter
getData	get the form data	-
reset	reset the format data	-

Example

Generate Form

<fm-generate-form 
  :data="jsonData" 
  ref="generateForm"
>
</fm-generate-form>

export default {
  data () {
    return {
      jsonData: {
        "list": [/* ... */],
        "config": {
          "labelWidth": 100,
          "labelPosition": "right",
          "size": "small",
          "customClass": ""
        }
      }
    }
  }
}

jsonData You can get this data by click the 'Generate JSON' button in the form generator page.

Get the form data dynamically

When you need to get the form data dynamically (such as a input component need to be edited), you need bind the value parameter.

<fm-generate-form 
  :data="jsonData"
  :value="formData"
  ref="generateForm"
>
</fm-generate-form>

export default {
  data () {
    return {
      formData: {
        name: 'Gavin'
      }
    }
  }
}

Validate and get the form data

After you call getData method, it will validate the data format, and then if the validation is pass it will return a JSON data contains all the available form data.

<fm-generate-form
  :data="jsonData"
  ref="generateForm">
</fm-generate-form>

this.$refs.generateForm.getData().then(data => {
  // Get data success
}).catch(e => {
  // Get data faild
})