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;
});