代码拉取完成,页面将自动刷新
同步操作将从 GavinZhulei/vue-form-making 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于Vue,ElementUI快速创建表单,进行数据校验,获取表单数据
演示地址:http://tools.xiaoyaoji.cn/form-marking
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
<div id="app">
<fm-making-form></fm-making-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</html>
npm install form-making -S
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(ElementUI, { size: 'small' })
Vue.use(FormMaking)
// or
import {
MakingForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.component(MakingForm.name, MakingForm)
<fm-making-form></fm-making-form>
工具提供两个组件 MakingForm(表单配置),GenerateForm(表单渲染)
首先看看 MakingForm 的功能介绍
预览可以实时预览你编辑表单的表单渲染的效果,并可以查看获取到填写的数据结构
生成JSON操作为渲染组件生成JSON数据
接下来就是 GenerateForm 如何使用,这里默认你已经将该组件正确引入项目
<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 => {
// 数据校验失败
})
}
}
})
自此一个表单就制作完毕
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。