台湾无码一区二区,无码高潮少妇毛多水多水,97亚洲熟妇自偷自拍另类图片

philadelphia 發(fā)布于2019-08-26 10:21 / 2086人閱讀

前言

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

表單項(xiàng)動(dòng)態(tài)顯示或隱藏

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

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

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

復(fù)雜的表單驗(yàn)證

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

可以通過?hidden?控制某一表單項(xiàng)的顯示或隱藏。

表單數(shù)據(jù)聯(lián)動(dòng)(on)

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

舉個(gè)例子，填寫 fullName?后，自動(dòng)填充 lastName?

輸入/輸出格式化(inputFormat/outputFormat)

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

inputFormat

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

outputFormat

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

自定義組件(component)

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

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

有一個(gè) props 為 value

對(duì)外觸發(fā) input 事件

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

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

上傳組件?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

版本號(hào)輸入框?https://github.com/FEMessage/el-semver-input

復(fù)雜的表單驗(yàn)證(rules)

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

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

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

不允許空值

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

必須以123開頭

同樣地，使用 component 渲染此組件

結(jié)語

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

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