vue结合form-create组件生成动态表单

近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

ElementUI
npm i @form-create/element-ui

我的基本框架是用的element，如果是iview可以参考一下官方文档。

首先放一下制作完成的效果图：

这里面那个最后那个单位值是个坑，看了好多便才搞明白如何处理这个参数。

下边我们开始讲解如何使用，作者已经封装好组件，我们只需要vue.use就可以全局调用了。

CDN 引入

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/theme-chalk/index.css" rel="stylesheet">
<!-- import ElementUI -->
<script defer src="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/index.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

NPM

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @form-create/element-ui

引入

import formCreate, {maker} from '@form-create/element-ui'

#兼容

element-ui ^2.8.2

Vue.use(formCreate)

在main.js设置好就可以使用了。

我采用的是json来处理格式化数据，官方给的数据格式是这样的

//JSON 规则
const rule=[
  {"type":"input","field":"goods_name","title":"商品名称","value":"mi"},
  {"type":"inputNumber","field":"goods_price","title":"商品价格","value":12}
]

我后端api接口采用的是tp6,这里便于直观展示，我直接dump一下内容，大概数据结构是这样的

关键来了，这里跟官方标准文档不一样的地方在于，增加了两层children，一开始没明白官方文档的说明，后来仔细看，插槽solt的解释，需要children包住内容才可以显示组件或者按钮名称，官方文档是这些的

                rule:[
                    {
                        type:'el-button',
                        children:['方式1']
                    },
                    {
                        type:'el-button',
                        children:[{
                            type:'i',
                            class:'el-icon-check'
                        },' 方式2']
                    }

我采用的是方式一，双层children，在设置children插槽中另外增加一层children用于显示名称。

如果需要表单验证的话，只需要在api接口中根据文档规则来生成相应的json规则，前端使用axios获取一下就可以了，非常方便。

       validate:[
           { required: true, message: '请输入商品简介', trigger: 'blur' },
       ],

这样就可以完美展示后台提供的数据了，这里我做了一个医疗项目维护的功能，可以很方便的来维护检查项目上一张图，仅供参考，后续会更新如何来录入数据，快速生成检查报告。

发环境准备

首先需要安装Chrome浏览器和开发者工具。进入Chrome应用商店，搜索“Extensions Reloader”和“Manifest Viewer”两个插件进行安装，这两个插件可以方便开发和调试。

Chrome 应用商品

创建插件

创建插件的方式有两种。第一种是从零开始创建，需要编写插件的各种文件，包括manifest.json、popup.html等。第二种是使用生成工具，如Yeoman，它可以自动生成插件文件和代码结构。

# Please make sure that `yo`, `gulp` and `bower` was installed on your system using this command:
npm install --global yo gulp-cli bower

# Install the generator:
npm install -g generator-chrome-extension

# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_

# Generate a new project
yo chrome-extension

编写插件代码

插件代码可以使用HTML、CSS、JavaScript等，需要根据插件的功能进行编写。

代码结构为：

manifest.json
popup (点击插件图标弹出的页面)
content script (插入到目标页面中执行的JS)
background script (在浏览器后台Service Workers中运行的程序)
options (选项页面，可有可无)

可以参考文档：http://docs.getxhr.com/ChromeExtensionDocument/docs.html

调试和测试

在Chrome浏览器中可以使用开发者工具进行调试和测试，可以查看插件的运行状态，以及对代码进行修改和调试。

使用Extensions Reloader可以简单实现插件更新

开发注意点

1、manifest.json必须放在插件项目的根目录，里面包含了插件的各种配置信息，其中也包括了popup、content script、background script等路径。
不支持使用SVG格式的图片。
2、在MV3中，由于Service Workers的机制，background页中不支持使用XMLHttpRequest，建议使用fetch()。
3、不允许在html文件中写js代码，只能通过script标签导入js文件的方式，导入文件也不能使用项目外部的文件，比如不能使用CDN上的文件
4、不要直接在元素中给onclick属性一个函数调用，例如testB，即使有定义onSave方法，也会报错onSave is not defined，要给元素添加事件要使用JS动态添加，例如$(“#save”).click(onSave)。
5、内容脚本和网站想要访问的所有资源都必须在web_accessible_resources属性下声明。
popup可以直接调用background中的JS方法，也可以直接访问background的DOM。
6、在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。
7、插件图标在未命中popup的URL匹配规则的页面时没有变灰，这是chrome自身的一个bug（可以关注bug论坛：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）。
8、chrome.tabs.connect或chrome.tabs.sendMessage不能用于与选项页面通信，选项页面可以使用chrome.runtime.connect和chrome.runtime.sendMessage与background页通信。
9、很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正是由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。
10、关于content script的注意事项
content script文件中可以获取web页面的DOM并修改，content script和原始页面共享DOM，但是不共享JS，JS是相互隔离的，可以通过window.postMessage和window.addEventListener来实现二者消息通讯。
11、不能访问background或popup中JS定义的变量或方法。
12、不能访问web页面或其他content script中定义的变量或方法。
13、content script文件中只能使用下面列出的API:
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage

跨域请求

// content.js
chrome.runtime.sendMessage({
   todo: "hello",
   data: 996,
}, function(res) {
   console.log(res);
});
// background.js
chrome.runtime.onMessage.addListener(function (request, sernder, sendResponse) {
  fetch('https://xxxx/xxx').then(function(response) { return response.json() })
  .then(function(json) { return sendResponse(json) })
  .catch(function(error) { return sendResponse(null) });
  return true;
});