vue-easy-form: json配置型的動態表單

vue-easy-from: 簡稱爲esForm，是一個獨立、不依賴第三方類庫的vue表單組件；可經過一份json配置動態輸出用戶所須要的表單。

痛點

做爲前端工程師，開發表單是屢見不鮮，是前端工程師的必修課之一。雖然vue這種數據驅動的開發框架給咱們帶來極大的方便，可是每次開發表單時都要從新編寫差很少同樣的html、js、css，這是極度重複無趣、沒養分、費時費力的事件。

vue資源(vue-awesome)表單類庫的現狀

筆者前期在開發vue表單時，也曾經直接應用過vue資源的表單類庫，雖是json配置，但在使用的過程當中，也發現了很多問題。

• 基本上都是靜態配置，無任何界面邏輯可言，（好比：A組件隱藏，B組件也須要隱藏等）；
• 類庫運行依賴於類庫自己定製化的組件，沒法直接使用第三方組件；若想使用第三方組件，必須對第三方組件按當前的類庫的組件規則進行封裝，這樣的組件只會是一次性使用，也沒法在其它項目中重複利用，費時費力，極大增長用戶的開發成本；
• 自定義組件須要全局聲明，開發耦合度高，維護困難；
• 組件定製化，功能缺失，難以理解。

爲何選擇esForm?

• 寫法簡單，只須要一個json配置，幾乎無需html, css；
• 佈局豐富，支持彈性佈局和tabs佈局；
• 無縫對接第三方組件，無需爲框架定製化組件（可自由選擇element-ui、fish-ui、也可自定義vue組件），不增長用戶的額外負擔；
• 表單功能齊全，包含標題、驗證、事件、單位、幫助、描述、數組等，這些能夠直接配置，也能夠自定義，無限制；
• 邏輯控制靈活方便（支持es寫法和函數寫法），用戶能夠任意操做；
• 組件引用即插即用，無須要全局聲明，耦合度超低。

如何使用esForm

安裝與引入

// 安裝
npm install --save vue-easy-form

import esForm from "vue-easy-form"; // 引入
Vue.use(esForm);    // 插件安裝
複製代碼

實例

在插件安裝時已經註冊一個"es-form"的表單組件，使用時只須要配置一個schema便可

<es-form :schema="formSchema" v-model="formValue"></es-form>
複製代碼

配置

formSchema中，每一項（如："name"）一般只須要配置3個屬性，甚至可直接配置一個label（如："author"），簡單方便。

data() {
    return {
      formValue: {
        // 自動同步表單的值
      },
      formSchema: {
        name: {
          label: "廣告名稱",        // label
          component: "el-input",    // 表單組件
          value: "首頁位置"         // 初始值
        },
        author: "做者"  // 簡寫：至關於配置了label,其它的使用默認值
      }
    };
  }
複製代碼

表單效果

直接對接第三方組件，無需爲框架定製化組件

具體的使用方法可查看官方的開發文檔和實例：
開發文檔：chengaohe45.github.io/vue-easy-fo…
github：github.com/chengaohe45…