国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

philadelphia / 2027人閱讀

前言

本文將介紹我們的表單解決方案?@femessage/el-form-renderer，展示我們在?Vue?技術(shù)棧下，我們是如何處理以下問題的：

表單項動態(tài)顯示或隱藏

表單數(shù)據(jù)聯(lián)動

表單輸入/輸出數(shù)據(jù)格式化

非常規(guī)表單項的處理

復雜的表單驗證

方案 表單項動態(tài)顯示或隱藏(hidden)

可以通過?hidden?控制某一表單項的顯示或隱藏。
表單數(shù)據(jù)聯(lián)動(on)

可以通過 on?來監(jiān)聽 blur?, focus?等事件來實現(xiàn)表單聯(lián)動。

舉個例子，填寫 fullName?后，自動填充 lastName?
輸入/輸出格式化(inputFormat/outputFormat)

拿 日期范圍選擇器?為例，組件輸出的值是一條字符串，但后端接口格式是兩個字段 {startDate, endDate}，則此時需要對數(shù)據(jù)進行格式化處理。

inputFormat

轉(zhuǎn)換輸入的數(shù)據(jù), 使其變成表單項需要的數(shù)據(jù)格式
outputFormat

轉(zhuǎn)換輸出的數(shù)據(jù), 使其變成需要的(接口期望的)數(shù)據(jù)格式

自定義組件(component)

@femessage/el-form-renderer?默認支持的?type?有限, 只能渲染常見的表單項。對于個性化的需求,?比如想渲染一個上傳組件，type?就不夠用了, 那怎么辦呢? 這時候 component? 選項就派上用場了。

component可以渲染自定義組件，而編寫自定義組件的關(guān)鍵是在組件內(nèi)部實現(xiàn) v-model:

有一個 props 為 value

對外觸發(fā) input 事件

則可以用 component? 屬性讓?@femessage/el-form-renderer?渲染此自定義組件

目前團隊對常見的表單擴展組件都根據(jù)標準實現(xiàn)了 v-model, 因此都可以不寫 template, 由?@femessage/el-form-renderer?實現(xiàn)數(shù)據(jù)驅(qū)動渲染

上傳組件?https://github.com/FEMessage/upload-to-ali

富文本編輯器?https://github.com/FEMessage/v-editor

省市區(qū)選擇器?https://github.com/FEMessage/el-select-area

范圍輸入框?https://github.com/FEMessage/el-number-range

版本號輸入框?https://github.com/FEMessage/el-semver-input

復雜的表單驗證(rules)

一個復雜的表單項配置, 往往需要定義一些規(guī)則(rules)來限制用戶輸入, 規(guī)則里面可能還會有自定義的驗證器(validator), 這樣的表單項多了之后, 就會導致頁面文件的配置項變得很長很長。

解決方案是在組件內(nèi)部設置校驗規(guī)則, 從而達到封裝隱藏目的。 使用者不用關(guān)心表單的驗證規(guī)則，直接引入組件并使用就好。

下面展示一個結(jié)合自定義組件(基本輸入框)封裝的驗證規(guī)則,?其規(guī)則如下：

不允許空值

只能輸入3位數(shù)或以上

必須以123開頭

同樣地，使用 component 渲染此組件
結(jié)語

我們內(nèi)部項目都在使用?@femessage/el-form-renderer，可以在 github?上找到更多信息。

歡迎大家使用，提高項目開發(fā)效率~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106052.html

相關(guān)文章

  • vue中如何實現(xiàn)的自定義按鈕

    摘要：在實際開發(fā)項目中，有時我們會用到自定義按鈕因為一個項目中，眾多的頁面，為了統(tǒng)一風格，我們會重復用到很多相同或相似的按鈕，這時候，自定義按鈕組件就派上了大用場，我們把定義好的按鈕組件導出，在全局引用，就可以在其他組件隨意使用啦，這樣可以大幅度 在實際開發(fā)項目中，有時我們會用到自定義按鈕；因為一個項目中，眾多的頁面，為了統(tǒng)一風格，我們會重復用到很多相同或相似的按鈕，這時候，自定義按鈕組件就...

    biaoxiaoduan 評論0 收藏0

  • JavaScript代碼整潔之道

    摘要：代碼整潔之道整潔的代碼不僅僅是讓人看起來舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護，同時降低幾率。另外這不是強制的代碼規(guī)范，就像原文中說的，。里式替換原則父類和子類應該可以被交換使用而不會出錯。注釋好的代碼是自解釋的。 JavaScript代碼整潔之道 整潔的代碼不僅僅是讓人看起來舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護，同時降低bug幾率。 原文clean-c...

    liaorio 評論0 收藏0

  • 前端經(jīng)典面試題總結(jié)

    摘要：接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目第一題考點作用域，運算符栗子都會進行運算，但是最后之后輸出最后一個也就是那么其實就是而且是個匿名函數(shù)，也就是屬于，就輸出第二和第三個都是類似的，而且作用域是都是輸出最后一個其實就 接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目： 第一題： showImg(https://segmentfault.com/im...

    BlackMass 評論0 收藏0

  • 私有云那家好-六大私有云廠商詳細對比！

    對比內(nèi)容UCloudStackZStackVMwareQingCloud騰訊TStack華為云Stack優(yōu)勢總結(jié)?基于公有云自主可控?公有云架構(gòu)私有化部署?輕量化/輕運維/易用性好?政府行業(yè)可復制案例輕量化 IaaS 虛擬化平臺?輕量化、產(chǎn)品成熟度高?業(yè)內(nèi)好評度高?功能豐富、交付部署快?中小企業(yè)案例多全套虛擬產(chǎn)品及云平臺產(chǎn)品?完整生態(tài)鏈、技術(shù)成熟?比較全面且健全的渠道?產(chǎn)品成熟度被市場認可，市場占...

    ernest.wang 評論0 收藏0

  • cross-env使用記錄

    摘要：能跨平臺地設置及使用環(huán)境變量讓這一切變得簡單，不同平臺使用唯一指令，無需擔心跨平臺問題安裝方式改寫使用了環(huán)境變量的常見如在腳本多是里這么配置運行，這樣便設置成功，無需擔心跨平臺問題關(guān)于跨平臺兼容，有幾點注意 cross-env能跨平臺地設置及使用環(huán)境變量, cross-env讓這一切變得簡單，不同平臺使用唯一指令，無需擔心跨平臺問題 1、npm安裝方式 npm i --save-de...

    Michael_Ding 評論0 收藏0

  • webpack打包插件

    摘要：引入的模塊引入的使用將打包打包的拆分將一部分抽離出來物理地址拼接優(yōu)化打包速度壓縮代碼，這里使用的是，同樣在的里面添加 const path = require(path); //引入node的path模塊const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

    ChanceWong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<