同步操作将从 GavinZhulei/vue-form-making 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
You can create a form by drag an drop the component from left side to the design area.
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'] |
name | description |
---|---|
action | Custom area at the top of the designer. |
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 | - |
<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>
<template>
<fm-making-form
ref="makingform"
style="height: 500px;"
:basic-fields="['input', 'textarea']"
:advance-fields="['blank', 'fileupload']"
:layout-fields="[]"
>
</fm-making-form>
</template>
<fm-making-form
ref="makingform"
style="height: 500px;"
preview
generate-code
generate-json
>
</fm-making-form>
const json = this.$refs.makingform.getJSON()
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.
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 | {} |
name |
description |
callback |
---|---|---|
on-change | called when form data changed | field: field id of the changed dada value: the new value data: form data |
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 | - |
<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.
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'
}
}
}
}
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
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。