推荐一款表单设计器

公司的项目里需要加表单生成功能，网上筛选了一下，发现了一款，用起来很棒，推荐给大家~

git 地址：github.com/GavinZhuLei… 「star 数4.4k」

如何使用？

install 安装

npm install form-making -S

页面中引入

// js 部分
import FormMaking from "form-making";
import "form-making/dist/FormMaking.css";
import { mapGetters } from "vuex";

<!-- html 部分  -->
<fm-making-form
  ref="makingform"
  style="height: 500px;"
  preview
  generate-json
>
  <template slot="action"> </template>
</fm-making-form>

打开页面，你会看到如下界面

可以根据自己的需要拖拽元素~ 拖拽完之后会生成 json 数据，我们如何获取这个 json 字符串呢？

获取 json 数据，使用 getJSON() 方法

this.$refs.makingform.getJSON()

拿到了json，如果我们已经新增了一个表单，现在想编辑这个表单，要怎么办？

编辑 json 数据，使用 setJSON() 方法

// exitFormConfig 是上次新增保存的 json 字符串
this.$refs.makingform.setJSON(JSON.parse(exitFormConfig));

假设您有一个 table，存储了我们新增的几个 form 表单，请看图：

当我们点击“修改”按钮后，可以对之前的表单进行编辑，页面如下：

接下来我们关闭这个页面，点击“新增”按钮的时候，如果页面中存留了旧的数据，要如何清除呢？

清除上一次编辑的缓存数据，使用 clear() 方法

this.$refs.makingform.clear();

编辑好了以后，如何预览我们拖拽生成的表单页面呢？

预览表单，使用 fm-generate-form 标签

<fm-generate-form :data="exitFormConfig" ref="generateForm"></fm-generate-form>

不仅要预览，我们还要在生成的这个表单里输入值，并且有按钮进行操作，要怎么办呢？可以通过 getData() 方法获取到我们输入的值以及表单元素的name等属性

this.$refs.generateForm.getData();

so easy ~~~ 是不是很简单的一款表单设计器，功能很强大，我只是用到了冰山一角~ 点击 查看更多的api