328 Star 1.6K Fork 666

GavinZhulei / vue-form-making

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
component.md 5.00 KB
Copy Edit Web IDE Raw Blame History
GavinZhulei authored 2020-07-10 12:17 . update dods

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
})
JavaScript
1
https://gitee.com/gavinzhulei/vue-form-making.git
git@gitee.com:gavinzhulei/vue-form-making.git
gavinzhulei
vue-form-making
vue-form-making
master

Search