FormMaking的使用

@阿猫阿狗~

已于 2022-06-21 12:14:51 修改

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

于 2022-06-21 12:12:49 首次发布

本文链接：https://blog.csdn.net/qq_25741071/article/details/125388581

版权

在开发过程中有一个可以让客户自己来设计表单的需求，随后看到了这个FormMaking，这个基于vue和elmenet-ui的一款表单设计器，因为网上使用的较少，自己记录一下，以备有类似问题时好上手！
官网：http://docs.form.making.link

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9ov4znQ-1655784428555)(//upload-images.jianshu.io/upload_images/18007657-f6f621ef9b352976.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中进行获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxqAsqRC-1655784428560)(//upload-images.jianshu.io/upload_images/18007657-3e8693005c08ced3.png)]

将需要的文件与ace.js一起放在static静态文件夹中一起引入。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irPK5FU7-1655784428561)(//upload-images.jianshu.io/upload_images/18007657-a9068ba88342267e.PNG)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kwtIGQs1-1655784428562)(//upload-images.jianshu.io/upload_images/18007657-ab43801918ad9743.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或方法为红色，则表示为收费的高级版本方可使用，不过对于简单的项目来说，普通的版本够用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5G9QokPy-1655784428563)(//upload-images.jianshu.io/upload_images/18007657-45ca7037fb3153e2.png)]

操作中使用栅格布局(默认24格)，对拖入的基础字段进行宽度布局调整，如果底层不使用栅格布局，直接将基础字段进行拖入，页面中会自适应页面宽度进行换行，初学较难控制。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hgbxkjDw-1655784428564)(//upload-images.jianshu.io/upload_images/18007657-6436f9d196101c2c.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弹窗展示表单使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9P1vLJHA-1655784428565)(//upload-images.jianshu.io/upload_images/18007657-a005e0557fcdc012.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, 来决定获取什么样的节点名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWiefzpV-1655784428567)(//upload-images.jianshu.io/upload_images/18007657-b704af32ff7e61d4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1140/format/webp)]

表单生成器API的使用

getData 获取表单数据 -
reset 重置表单数据

this.$refs.formMaking.getData().then(data => {})
this.$refs.formMaking.reset()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rqM2Nzz-1655784428568)(//upload-images.jianshu.io/upload_images/18007657-2fcb43ae8f58f074.PNG?imageMogr2/auto-orient/strip|imageView2/2/w/852/format/webp)]

官网给出的reset()，项目中却没有达到重置的效果，尝试了很多的方法，最后给出自己的方法

// 第一种在重新获取数据时，将formdata的数据也重新获取赋值，就相当将表格的结构也重新渲染

// 第二种，将valueData使用object的方法将其清空,然后再重新赋值
for(var key in this,valueData) {
  this.valueData[key] = ''
}

有使用过的朋友，是否可以指出表单设计页中的问题？！

未结束，更多的使用方法持续更新中…

@阿猫阿狗~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
FormMaking的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9ov4znQ-1655784428555)(//upload-images.jianshu.io/upload_images/18007657-f6f621ef9b352976.gif)]因为是 element-ui 的组件库，在使用的时候需要引入 Element 包，具体引入方法请参考 Element 文档快速上手[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxqAsqRC-165
复制链接

扫一扫