sczts-custom-form v0.1.0

快速开始

1. 安装依赖

npm i sczts-form-generator

2. 在 main.js 中全局引用

import Vue from 'vue'
import formGenerator, { fgWidgets } from 'sczts-form-generator'

// ...
Vue.use(formGenerator, {
  widgets: [
    ...widgets, // 组件配置
    // 可以注入扩展组件配置
  ],
  // [可选] 注入扩展组件
  extend: require.context('./components/form_generator_extends', true, /\.(vue|js)$/),
});

组件说明

1. 表单编辑器

如何使用

<template>
  <div>
    <fg-editor v-model="forms" :defaultForms="defaultForms"></fg-editor>
  </div>
</template>

<script>
export default {
  data(){
    return {
      forms: [],
      defaultForms: [
        {

        }
      ]
    }
  }
}
</script>

属性

2. 表单生成器

如何使用

<template>
  <div>
    <fg-render
        v-model="form_data"
        :forms="config.forms"
        :labelWidth="config.labelWidth"
        :displayType="config.displayType"
    ></fg-render>
  </div>
</template>

<script>
export default {
  data(){
    return {
        config: {
            forms: [],
            labelWidth: 120,
            displayType: 'top'
        },
        form_data:{}
    }
  }
}
</script>

属性

如何扩展自定义表单控件？