# 文件驅動 想要做到文件驅動表單，首先要做幾個表單元素元件。基於原生的HTML5的表單元素，做了一下分類，比如文字類、數字、日期、選擇等，具體如下圖。 【圖片】  然後就是 > 文件 >> json >> vue >> UI >>表單 這個流程了。 其中Vue提供了很方便的資料雙向繫結的功能， UI提供了非常好看的視覺效果。 那麼既然他們都做好了，我就不重複製造輪子，直接拿過來使用。 可能你會奇怪，UI庫提供了一些列的元件，為啥還要自己封裝元件呢？ 主要原因就是使用方式和我的想法有點不太一樣，比如element的select要這麼用：（程式碼來自官方） ~~~ ~~~ 這是非常標準的用法，也非常靈活，只是有一點點麻煩。好吧，我承認是我太懶了，我不想每次用的時候都寫這麼多的程式碼（html+js）。我想這樣寫： ~~~ ~~~ 三行程式碼搞定，一行html，兩行js。 元件只需要設定兩個屬性，一個是model，一個是元資料（meta），也就是json格式的屬性資訊。 # 實現方法 其實方法也很簡單，只需要自己做一個元件，把上面那段el的select（原生的HTML5測試通過，el的還沒測試，應該可以吧）放進去，把需要的各種屬性值（包含options的資料項）做成json通過meta屬性傳遞進去就可以了。 ## 優點 非常簡單，可以大大減少程式碼量，而且還可以用v-for來遍歷，這樣就算再大的表單，一個for就搞定了。 ## 缺點 靈活度不夠，肯定沒有直接使用select來的靈活。 ## 選擇 不過最終“懶惰戰勝了靈活的需求”，我還是想按照我的想法做出來一套東東玩玩。 # 程式碼 ## 文字類的Input 下面是文字類的input的封裝方式，基於原生html5。為啥不用element呢？因為我跳過了vue2.*，直接使用vue3.0來寫的，但是在安裝element的時候，報了一大堆錯誤。 我基本功太差沒搞不定，所以就先不用element了。 用原生的做驗證我的想法是否可以實現，以後搞定了在加上其他UI。 本來我的想法就是基於每個UI都做一套，可以跨UI，甚至跨架構。 ~~~ /** 文字類的，text、密碼、url、郵件等 */ ~~~ ## check 多選 再貼一個多選的元件，使用type=”check”實現，這個因為要實現多選，所以程式碼有些不同。其他的程式碼都是雷同的，就不一一貼了。想看程式碼可以到這裡看 。[https://github.com/naturefwvue/nfComponents](https://github.com/naturefwvue/nfComponents) ~~~ /**多選組，返回逗號連線的value值，比如：“1,2,3” */ ~~~ # 分還是合？ 其實這些零散的元件可以合在一個元件裡面的，程式碼也不會太多，但是我想來想去，還是分開的話，便於以後的擴充套件。 只是這麼零散，用的時候還要想我到底用哪個元件，這不符合我懶惰的人設，所以我又做了一個“組合”元件， 就是把分散的各個元件，組成一個元件，這樣在使用的時候引用這一個就可以了。 ~~~ /** 表單元素的綜合元件，根據型別自動載入相應的元件 */ ~~~ ## value的型別問題 這裡有個數據型別的問題，各個子元件可以規定 modelValue的型別，但是這個組合元件的型別怎麼定呢？我寫成了 object，雖然執行的時候雖然不會報紅色的錯誤，但是總會報資料型別驗證錯誤的提示，按F12,滿眼全是，很煩。 # one more thing 程式碼還在不斷完善中，希望能夠找到自同道合的人。 還有很多後續，比如meta是如何生成的，表單的程式碼到底是啥樣的？還有查詢和資料列表怎麼辦？等等都有解決