kai-making

Install

npm install kai-making -S

Quick Start

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)

Template

<fm-generate-form></fm-generate-form>

设计器引用

import {MakingForm} from 'kai-making'
Vue.component(MakingForm.name, MakingForm)

<!-- 需要设置编辑区域高度 -->
<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>

props

| Prop name | Description | Type | Default value | | ------------ | ------------ | ------------ | ------------ | | preview | 预览，头部操作按钮 | Boolean | false | | generate-json | 生成JSON | Boolean | false | | generate-code | 生成代码 | Boolean | false |

methods

| Function name | Description | | ------------- | ------------------------------ | | getJSON | 获取设计器生成的JSON数据 | | getHtml | 获取生成可使用的html代码 | | setJSON(value) | 根据value值设置表单设计器 |

slots

| Slot name | Description | | ------------- | ------------------------------ | | action | 自定义设计器操作按钮，展示在设计头部区域 |

下面就是加载对应的数据用于展示，假设你已经正确加载组件

<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 => {
                // 数据校验失败
            })
        }
    }
})