在开发过程中有一个可以让客户自己来设计表单的需求，随后看到了这个FormMaking，这个基于vue和elmenet-ui的一款表单设计器，因为网上使用的较少，自己记录一下，以备有类似问题时好上手！
官网：http://docs.form.making.link
示例.gif
// npm 的下载
npm install form-making -S
因为是 element-ui 的组件库，在使用的时候需要引入 Element 包，具体引入方法请参考 Element 文档 快速上手
// main.js中完全引入，官网有部分引入的方法
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)
// index.html中引入ace.js，可以预览生成的json或html，如果不引也可以生成，但没有解析格式样式。
<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
ace.js是在线访问的，因为项目原因没办法访问网络，于是按照地址将ace.js下载到本地，引入后发现运行时会提示报缺少其它访问的js及html的文件(就是在文章顶部动图中所看到的报错)，应该是ace.js内部又访问了其它的文件，为了弥补报错提示及展示效果，可将提示缺少的文件进行下载，在官网进入设计器页面中的NetWork中进行获取
下载缺少的文件.png
将需要的文件与ace.js一起放在static静态文件夹中一起引入。
缺少的js文件.PNG
同时引入缺少的js.PNG
补漏一个mode-html.js，位置和方法与上面的三个相同 =。=！
文件提取地址：https://pan.baidu.com/s/1anhH7lqY8QCx1CORMg0zgA
提取密码：1ybl
快速上手：
表单设计器
// 全局使用，使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染
<template>
<fm-making-form
ref="makingform"
style="height: 100vh"
preview
generate-code
generate-json
>
<template slot="action">
</template>
</fm-making-form>
</template>
表单生成器
// 可以将设计器中生成的json拿到想展示的页面，就可以将页面进行展示
<template>
<div>
<fm-generate-form
:data="jsonData"
ref="generateForm"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">Submit</el-button>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"单行文本","key":"1575897887618","model":"input_1575897887618","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
}
},
methods: {
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
alert(JSON.stringify(data))
}).catch(e => {
})
}
}
}
动态数据
// element-ui弹窗中展示表单
<el-dialog title="表单" :visible.sync="true" width="50%">
<fm-generate-form
:data="jsonData"
ref="generateForm"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</el-dialog>
export default {
data () {
return {
// valueData中可以获取接口返回的数据，将对应的表单动态赋值
valueData: {name: '新的单行名称'}
jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"单行文本","key":"1575897887618","model":"input_1575897887618","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
}
}
}
在使用时发现分普通版本和高级版本，在官网的一些API或方法为红色，则表示为收费的高级版本方可使用，不过对于简单的项目来说，普通的版本够用。
普通版本.png
操作中使用栅格布局(默认24格)，对拖入的基础字段进行宽度布局调整，如果底层不使用栅格布局，直接将基础字段进行拖入，页面中会自适应页面宽度进行换行，初学较难控制。
控制基础字段布局.png
加载表单数据时，将引入数据存入:value="" 便可自动渲染表单
<template>
<div>
<fm-generate-form
:data="jsonData"
:value="editData"
ref="generateForm"
>
</fm-generate-form>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
editData: {
/* 需要加载的表单数据可以在这里进行设置 */
name: 'Gavin'
},
}
}
}
例：用于配合el-dialog弹窗展示表单使用
弹窗展示表单数据.PNG
formData：设计表单时所生成的JSON，用于初始表单雏形。
valueData：渲染表单所需要的数据，用于页面内容的数据渲染。
需求：不使用栅格布局，表单设计时控制基础字段的宽度，表单生成时自适应页面的宽度，默认同一行展示，宽度超出时换行。
基础字段默认是独占一行，设置了宽度也只能改变输入框的宽度，根据操作组件页面所发生的变化，拿到标签生成的类名，可能是因为嵌套的原因，样式局部作用无效
// 表单设计器的标签样式style中添加了
display：flex
// 并且在style标签中添加
.el-form-item--small {
float: left;
}
// 在表单生成页同样在style标签中设置了
float: left
// 为的是不管先进入哪个页面，都会全局的添加上float，也可以在全局样式中添加
上面的方法是在全局中添加了css样式，但如果项目不断发展，这里很可能就会给以后挖下一个坑。于是将css样式改成了局部，避免了全局污染
// 表单设计页
<template>
<div>
<fm-making-form
ref="makingform"
style="height: 100vh; display: flex"
preview
generate-code
generate-json
>
</fm-making-form>
</div>
</template>
<script>
export default {
data () {
return {
item: {}
}
},
mounted () {
this.item = this.$refs.makingform
},
watch: {
// 监听对象内部数组的变化
'item.widgetForm.list': {
handler() {
// 在这里获取节点时，有一个bug一直没解决，于是调用强刷页面在updated中进行操作
// bug问题只出现在单行文本字段拖入时，无法获取到第一个，如果添加deep: true 深度监听，又无法获取到第二个，其他字段拖入均无问题。
this.$forceUpdate() // 强制刷新页面
}
}
},
updated () {
// 强制刷新页面后，updated可以获取到节点
var smalls = document.getElementsByClassName('el-form-item--small')
for(var i = 0; i < smalls.length; i++) {
smalls[i].style.float = 'left'
}
}
}
</script>
// 表单生成页
因为页面的数据是动态生成的，我们要获取节点并添加style,不能在mounted里进行操作，在请求返回数据后来执行
this.$nextTick(() => {
var smalls = document.getElementsByClassName('el-form-item--small')
for(var i = 0; i < smalls.length; i++) {
smalls[i].style.float = 'left'
}
})
但在设计表单中发现，更改表单属性，组件的尺寸会影响到class类名的改变，从而无法准确获取到元素节点，于是增加了兼容方法，通过判断尺寸的size, 来决定获取什么样的节点名
兼容不同的节点名.png
表单生成器API的使用
getData 获取表单数据 -
reset 重置表单数据
this.$refs.formMaking.getData().then(data => {})
this.$refs.formMaking.reset()
formMaing-getData.PNG
官网给出的reset()，项目中却没有达到重置的效果，尝试了很多的方法，最后给出自己的方法
// 第一种在重新获取数据时，将formdata的数据也重新获取赋值，就相当将表格的结构也重新渲染
// 第二种，将valueData使用object的方法将其清空,然后再重新赋值
for(var key in this,valueData) {
this.valueData[key] = ''
}
有使用过的朋友，是否可以指出表单设计页中的问题？！
未结束，更多的使用方法持续更新中...
网友评论