方便不想看完全篇文章的童鞋，簡單總結一下，這是篇軟廣，主要是推廣自己在業(yè)務中沉淀的一個開源組件 vue-dynamic-form-component 。基于 element-ui 實現(xiàn)的 vue組件，只需編寫類似 async-validator 的規(guī)則，自動生成對應的表單，支持常見輸入類型的同時，支持嵌套對象、hashmap、多維數(shù)組等復雜類型。有需要的童鞋歡迎使用和貢獻代碼，順便給個star（我也不知道為什么字體自動加黑了，不關我事）

前言

幾個月前，我在github開源了一個前端解析手機應用安裝包（IPA 或 APK 文件）信息的工具 app-info-parser ，算是第一次正兒八經的做開源這件事，之后就有了半夜三四點回復issue、修bug的體驗，說實話，上完班還要處理issue是挺累的，但也是樂在其中。正所謂開源一時爽，一直開源一直爽。

對于程序員而言，最不喜歡的事情，除了和產品經理 吵架 （交流，是交流，不是吵架，要peace）外，估計就是一直做重復的事情了。在程序界，有相當一部分開源工具都是為了把人從重復的事情中解放出來，去做更有趣、更能體現(xiàn)個人價值的事情。比如 AI智能回復老婆消息 (請勿隨意嘗試，老婆沒了我不負責)。

之前開源的工具 app-info-parser 是減少重復工作，提高生產效率，接下來的主角 vue-dynamic-form-component 也是如此。

先貼一個展示大概功能的 gif ，動圖有點大，如果加載不出來的話可以到 組件首頁 查看。

左邊是你需要編寫的主要代碼，右邊是對應生成的表單。

vue-dynamic-form-component.gif

背景（Why）

為什么要做這個組件？其實在前言中已經提到：因為不想一直做重復、沒有技術含量的事情。

對于本篇文章而言，這件重復、沒有技術含量的事情就是：簡單的表單代碼

我所在的小組主要負責公司的公共服務系統(tǒng)搭建及維護，隨之而來的便是一套接一套的CURD系統(tǒng)，目前業(yè)界已經存在很多優(yōu)秀的UI庫，比如為 Vue 而生的 element-ui, iView，基于 react 的 ant-design 等，已經在很大程度上提高了PC管理系統(tǒng)的開發(fā)效率，減少了很多重復工作。

但是對于表單功能，UI庫出于通用性的考慮，實際使用中，對于簡單的數(shù)據(jù)對象，我們仍然需要編寫大量的表單代碼來實現(xiàn)，因為出現(xiàn)了很多優(yōu)秀的動態(tài)表單組件，比如 vue-form-generator，vue-form-making

那么為什么我還要再造一個類似的輪子？這其實要結合組內的技術棧來說：

由于組內的人員配置問題：前端1人（沒錯，就是孤獨的我）、后端8人+，在技術棧上，選用了后端同事相對容易上手的 Vue ，基于 element-ui 開發(fā)管理系統(tǒng)。而目前已有的動態(tài)表單組件存在以下不適用的問題：

• vue-form-generator：設計思想很好，但是組件樣式比較old school，同時對多級對象、多維數(shù)組等復雜數(shù)據(jù)支持不是很好，需要自己實現(xiàn) field 組件，使用成本較高
• vue-form-making：也是基于element-ui, 樣式統(tǒng)一，但是基于組件類型生成表單的方式不夠靈活，只能利用已存在的輸入組件，因此不支持多級對象等復雜類型

其他的組件也存在或多或少的類似問題，就不一一列舉了。

以上就是為什么我會想要再造一個Vue的動態(tài)表單輪子，其實里面就已經包含了接下來我們要講的： vue-dynamic-form-component 有什么作用？

功能（What）

動態(tài)生成表單

基于 async-validator 的規(guī)則來生成表單，只需要編寫簡單的聲明配置，即可自動生成表單，只需要關注數(shù)據(jù)類型，無需關注數(shù)據(jù)類型對應何種輸入組件

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

export default {
  data () {
    return {
      data: {},
      descriptors: {
        date: { type: 'date', label: 'date \'s label', required: false },
        number: { type: 'number', label: 'number \'s label', required: true, placeholder: 'please input the number' },
        string: { type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g },
        url: { type: 'url', label: 'url \'s label', required: true, placeholder: 'please input the url' },
        email: { type: 'email', label: 'email \'s label', required: false },
        enum: { type: 'enum', label: 'enum\'s label', enum: ['value-1', 'value-2'] }   
      } 
    }
  }
}

image

如果是直接使用 element-ui，除了長得多的html代碼，還需要編寫對應的 rule 以供表單驗證，對應的代碼量要多得多。

支持嵌套對象/Hashmap/多維數(shù)組

使用 element-ui 編寫表單時，為了支持嵌套對象等復雜類型，我們可以在 el-form-item 中再添加一個 el-form 或者 el-form-item 。

但是，如果有更好的選擇，你真的愿意一遍一遍的寫這樣的代碼嗎？

<!-- 省略data，rules等代碼 -->
<el-form label-width="120px" :model="data" :rules="rules">
  <el-form-item prop="user" label="用戶">
    <el-form :model="data.user">
      <el-form-item label="名字" prop="name">
        <el-input v-model="data.user.name" placeholder="只允許英文、數(shù)字"></el-input>
      </el-form-item>
    </el-form>
  </el-form-item>
</el-form>

要注意，以上僅僅只是一個輸入框（已省略data代碼，為了美觀還需要額外的樣式代碼），就需要寫這么多代碼，能忍？誰愛忍誰忍，我不忍了?？纯慈绻鞘褂?vue-dynamic-form-component, 我們需要做什么

// 只展示 descriptors 代碼，其他無需變更
{
  user: {
    type: 'object',
    fields: {
      name: { type: 'string', label: '名字', placeholder: '只允許英文、數(shù)字' }
    }
  }
}

并且， vue-dynamic-form-component 還對多級表單做了樣式優(yōu)化，自動加深子表單的背景色（初始背景色、顏色偏移量可配置），方便區(qū)分：

demo

同時，針對 hashmap / array 等復雜數(shù)據(jù)類型實現(xiàn)了對應的交互邏輯，提供添加、刪除等操作：

demo

看完這個你確定你還想再回去寫前面的代碼？（等我不干程序員了我就去當推銷員-。-）

使用（How）

假如你心動了，那么，心動不如行動（自我嘲諷：好老土的說法），趕緊用起來，把自己從繁瑣無聊的表單代碼中解放出來。

具體用法請查閱組件文檔：https://vue-dynamic-form.quincychen.cn/

別忘了先去 github 點個star哦（你以為這里就不加粗了嗎，不存在的兄dei）

最后

不要拘泥于業(yè)務開發(fā)，善于（或者說要熱衷于）尋找業(yè)務/生活中存在的待解決問題，然后干掉它，這才是真正體現(xiàn)你價值的地方。

共勉~