scp-form-create

yarn install

cnpm install

npm install

yarn serve

npm run serve

yarn build

npm run build

yarn lib

npm run lib

打包后可用在其它项目作为文件包使用：
import scpFormCreate from './libs/scp-form-create/scp-form-create.umd'
import './libs/scp-form-create/scp-form-create.css'
Vue.use(scpFormCreate)

form-create-designer

官方地址: https://designer.form-create.com/guide/

所有配置均已经透传，可自行根据文档添加

设置组件高度建议直接使用style样式

<template>
<div>
  <sp-form-create style="height: 100vh" v-model="list" @change="change" :baseFieldArray="baseFieldArray"></sp-form-create>
</div>
</template>

<script>
export default {
  name: "homeView",
  data(){
    return{
      list: [],
      baseFieldArray: []
    }
  },
  mounted() {
    // this.list = [
    //   {
    //     "type": "input",
    //     "field": "Fscb1omesmbl4k",
    //     "title": "输入框",
    //     "info": "",
    //     "$required": false,
    //     "_fc_drag_tag": "input",
    //     "hidden": false,
    //     "display": true
    //   },
    //   {
    //     "type": "inputNumber",
    //     "field": "F9gf1omesmeo33",
    //     "title": "计数器",
    //     "info": "",
    //     "$required": false,
    //     "_fc_drag_tag": "inputNumber",
    //     "hidden": false,
    //     "display": true
    //   }
    // ]
    setTimeout(() => {
      this.baseFieldArray = []
      const arr = [
        {value: 'name', label: '姓名'},
        {value: 'sex', label: '性别'},
        {value: 'age', label: '年龄'}
      ]
      arr.forEach(v => {
        this.baseFieldArray.push(v)
      })
    }, 3000)
  },
  methods: {
    change(v){
      console.log(v, '完成')
    }
  }
}
</script>

<style scoped>

</style>

自定义基础配置: https://blog.csdn.net/qq_41169990/article/details/136736149?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171059421816800180672313%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171059421816800180672313&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-6-136736149-null-null.142^v99^pc_search_result_base2&utm_term=form-create-designer%20%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE%20%E5%AD%97%E6%AE%B5id%E6%9B%B4%E6%94%B9&spm=1018.2226.3001.4187

form-create

官方地址: https://www.form-create.com/v2/guide/

根据规则可生成动态表单