import FormMaking from 'kai-making'
import 'kai-making/dist/KaiMaking.css'
Vue.use(FormMaking)
// or
import {
GenerateForm
} from 'kai-making'
import 'kai-making/dist/KaiMaking.css'
Vue.component(GenerateForm.name, GenerateForm)
<fm-generate-form></fm-generate-form>
<!-- 需要设置编辑区域高度 -->
<fm-making-form style="height: 500px;" preview generate-code generate-json>
<template slot="action">
</template>
</fm-making-form>
<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/src-min/ace.js"></script>
<fm-generate-form
:data="jsonData"
:remote="remoteFuncs"
:value="values"
ref="generateForm">
</fm-generate-form>
new Vue({
...
data () {
return {
jsonData: {}, // 表单配置中生成的json数据
values: {}, // 表单需要显示的表单数据
remoteFuncs: {
// 组件配置时配置的远端方法,保持和配置时输入的名称一致
func_test (resolve) {
// 模拟接口请求
setTimeout(() => {
const options = [
{id: '1', name: '1111'},
{id: '2', name: '2222'},
{id: '3', name: '3333'}
]
// 获取到的值和标签可以通过配置页远端配置
// 值:id 标签:name
resolve(options) // 将后端获取的数据放入回调函数中
}, 2000)
},
func_test2....
}
}
},
methods: {
...{
// 调用此方法验证表单数据和获取表单数据
this.$refs.generateForm.getData().then(data => {
// 数据校验成功
// data 为获取的表单数据
}).catch(e => {
// 数据校验失败
})
}
}
})