拖拽控件

基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来

工具地址：http://tools.xiaoyaoji.cn/form

LGPL

请您遵守开源协议标准，若需要用于商业软件而不开源代码请通过引用方式(npm 或者 cdn)使用

<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script> Install

npm install form-making -S Quick Start

import FormMaking from 'form-making' import 'form-making/dist/FormMaking.css' Vue.use(FormMaking) // or import { GenerateForm } from 'form-making' import 'form-making/dist/FormMaking.css' Vue.component(GenerateForm.name, GenerateForm) Template

<fm-generate-form></fm-generate-form> 设计器引用

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

<fm-making-form preview generate-code generate-json> <template slot="action"> </template> </fm-making-form> props

通过 在线地址 或者引用设计器生成的JSON，用于表单渲染

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

<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 => { // 数据校验失败 }) } } }) 高级字段使用 自定义扩展 图片上传 支持 如果你发现了新的 bug，或者有新的 feature request，请新建一个 issue 捐赠

如果觉得还不错，请作者喝杯咖啡吧

QQ群：902048874