動態(tài)自定義表單封裝

為什么要做這個動態(tài)表單呢？

  • 提高前端開發(fā)效率，是公司組件庫中必不可少的一種組件。
  • 提高自身對Vue組件的理解和代碼封裝能力。

演示

dyform.gif

使用

企業(yè)微信20210607-174353.png

設(shè)計思路

  • 盡可能的通過json數(shù)據(jù)動態(tài)控制表單的內(nèi)容、布局；
  • 可動態(tài)插入自定義組件作為表單項
  • 表單中所有IO項都能進行校驗
  • 同一個基礎(chǔ)組件可以有多種展示形態(tài)
  • 像使用原生組件一樣配置表單數(shù)據(jù)，與監(jiān)聽基礎(chǔ)組件觸發(fā)事件

實現(xiàn)

  • 對基礎(chǔ)組件進行二次封裝，同一組件根據(jù)傳入的componentsType不同展示不同的形態(tài)。
  • 使用attrs、listeners對數(shù)據(jù)和事件進行透傳達到使用基礎(chǔ)組件與原生組件一致的效果
  • 根據(jù)傳入的json數(shù)據(jù)，動態(tài)雙向綁定生成form所需的數(shù)據(jù)表單屬性，實現(xiàn)統(tǒng)一校驗功能

源碼

如果覺的代碼對您有用處請給個贊，謝謝大官人
iView組件二次封裝

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容