代码拉取完成,页面将自动刷新
同步操作将从 GavinZhulei/vue-form-making 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来
工具地址:http://tools.xiaoyaoji.cn/form
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
npm install form-making -S
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)
<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>
Prop name | Description | Type | Default value |
---|---|---|---|
preview | 预览,头部操作按钮 | Boolean | false |
generate-json | 生成JSON | Boolean | false |
generate-code | 生成代码 | Boolean | false |
Function name | Description |
---|---|
getJSON |
获取设计器生成的JSON数据 |
getHtml |
获取生成可使用的html代码 |
setJSON(value) |
根据value值设置表单设计器 |
Slot name | Description |
---|---|
action | 自定义设计器操作按钮,展示在设计头部区域 |
通过 在线地址 或者引用设计器生成的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 => {
// 数据校验失败
})
}
}
})
如果觉得还不错,请作者喝杯咖啡吧 ☺
QQ群:902048874
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。