海舟Ocean：我們?cè)谠O(shè)計(jì)諸如CRM（客戶關(guān)系管理）、OA（辦公自動(dòng)化）等面向B端用戶的后臺(tái)界面時(shí)，往往會(huì)被各種各樣錯(cuò)綜繁雜的組件弄得暈頭轉(zhuǎn)向，不知該如何選擇。有時(shí)好不容易選完之后，又會(huì)發(fā)現(xiàn)有更合適的組件，導(dǎo)致反復(fù)修改設(shè)計(jì)稿，降低了工作效率。

那么在對(duì)比了幾個(gè)常用的組件庫(kù)（Ant Design / Element / iView）并結(jié)合自身的工作經(jīng)驗(yàn)之后，我選擇了一些常用的組件，來(lái)和大家簡(jiǎn)單總結(jié)下它們的使用場(chǎng)景以及可能出現(xiàn)的誤區(qū)。

在Ant Design 的組件庫(kù)中，分為了通用、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他這七大類組件。今天先來(lái)看看數(shù)據(jù)錄入中的相關(guān)組件，我將其又分為了手動(dòng)輸入以及點(diǎn)擊選擇兩大類。（評(píng)分、上傳等特征明顯的組件就不在此贅述了。）

手動(dòng)輸入

? 1. 輸入框Input

輸入框是數(shù)據(jù)錄入中最常見(jiàn)也是最基礎(chǔ)的組件，在需要用戶輸入內(nèi)容的時(shí)候即可選用。

除了常規(guī)的輸入框，帶前/后綴、帶圖標(biāo)、帶按鈕的輸入框也是較常用到的。

在輸入內(nèi)容中頭/尾是相對(duì)固定的時(shí)候，我們就可以采用帶前/后綴的輸入框來(lái)減少用戶手動(dòng)輸入，比如網(wǎng)址輸入框就可以加上后綴。

有時(shí)候?yàn)榱藥椭脩袅私廨斎雰?nèi)容的類型，可以在輸入框中加上圖標(biāo)，比如輸入用戶名或密碼的時(shí)候。

帶按鈕的輸入框最常使用的場(chǎng)景就是搜索框了。

? 2. 自動(dòng)完成AutoComplete

自動(dòng)完成其實(shí)是輸入框Input 的一項(xiàng)功能，但是 Ant Design 和 iView 中將其單獨(dú)拎出來(lái)了，為了避免大家搞混，我們這兒也單獨(dú)講。（Element中在輸入框 - 帶輸入建議）

顧名思義，自動(dòng)完成就是輔助用戶輸入。在輸入一部分內(nèi)容后，提供相關(guān)的備選項(xiàng)，不僅可以減少手動(dòng)輸入，還能更精準(zhǔn)的輸入。常見(jiàn)的使用場(chǎng)景就是搜索框了。

? 3. 數(shù)字輸入框InputNumber

數(shù)字輸入框特用于需要輸入范圍數(shù)值的場(chǎng)景（電話QQ等號(hào)碼不宜使用）。右側(cè)的步進(jìn)器則可以幫助用戶精準(zhǔn)控制數(shù)值的增減。

當(dāng)然作為輸入框的一種，也可以加上前/后綴來(lái)減少固定內(nèi)容的輸入，比如%或者貨幣單位（￥、$、元、円）。

點(diǎn)擊選擇

? 1. 單選框Radio

單選框顧名思義就是在一組選項(xiàng)中僅可選擇一個(gè)時(shí)使用。

由于單選框的選項(xiàng)都是平鋪展示的，所以選項(xiàng)不宜過(guò)多，當(dāng)選項(xiàng)較多時(shí)建議采用選擇器Select（后文會(huì)提到）。

按鈕形式的單選框也可以被當(dāng)作標(biāo)簽頁(yè)Tabs 來(lái)使用（標(biāo)簽頁(yè)Tabs的本質(zhì)其實(shí)就是單選框）。

? 2. 多選框Checkbox

多選框則是在一組選項(xiàng)中需要選擇多個(gè)時(shí)使用。

同樣，由于是平鋪展示，選項(xiàng)不宜過(guò)多。

多選框不同于單選框Radio 的是，它可以單獨(dú)使用，來(lái)表示兩種狀態(tài)之間的切換，類似于開(kāi)關(guān)Switch。區(qū)別在于開(kāi)關(guān)Switch 會(huì)直接觸發(fā)改變狀態(tài)，多選框則一般用于狀態(tài)標(biāo)記，需要配合提交操作使用。

? 3. 選擇器Select

選擇器也是數(shù)據(jù)錄入中很常見(jiàn)的組件，它以下拉菜單的形式來(lái)呈現(xiàn)選項(xiàng)（選項(xiàng)較少時(shí)建議采用單選框Radio 或多選框Checkbox 平鋪展示）。

除了單選，還有多選的形式。

上文輸入組件中提到的自動(dòng)完成AutoComplete，其實(shí)也是選擇器的一種衍生方式──帶輸入的選擇器。

? 4. 級(jí)聯(lián)選擇Cascader

級(jí)聯(lián)選擇是指，在選擇器Select 選項(xiàng)數(shù)量較大時(shí)，采用多級(jí)分類的方式將選項(xiàng)進(jìn)行分隔，便于用戶選擇。比如地址選擇，就可以按省市區(qū)一層層分類。

? 5. 穿梭框Transfer

當(dāng)多選框Checkbox 選項(xiàng)過(guò)多時(shí)，除了選擇器Select 的多選形式，還可以用穿梭框的形式來(lái)呈現(xiàn)。相比于選擇器Select，穿梭框占據(jù)更大的空間，當(dāng)然也可以展示選項(xiàng)的更多信息。

? 6. 日期選擇器DatePicker

當(dāng)需要錄入日期的時(shí)候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。

當(dāng)然，需要錄入一段時(shí)間的時(shí)候，也可以同時(shí)選擇開(kāi)始日期和結(jié)束日期。

? 7. 時(shí)間選擇器TimePicker

時(shí)間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時(shí)間即可。

時(shí)間選擇器和日期選擇器DatePicker 還可以組合使用。

? 8. 滑塊Slider

滑塊的使用場(chǎng)景類似于數(shù)字輸入框InputNumber，需要在某個(gè)范圍內(nèi)錄入數(shù)值。不同的是，它可以直接選取而不用手動(dòng)輸入。

當(dāng)然，也可以和數(shù)字輸入框InputNumber 配合使用。

還可以選擇某個(gè)區(qū)間，比如價(jià)格區(qū)間。

當(dāng)數(shù)據(jù)選項(xiàng)較少或者離散（不連續(xù)）時(shí)，還可以采用分段的形式。

總結(jié)

今天主要講了數(shù)據(jù)錄入的相關(guān)組件，共11個(gè)：

• 輸入框Input：最基礎(chǔ)組件，除常規(guī)外，還有帶前/后綴、帶圖標(biāo)、帶按鈕的形式。
• 自動(dòng)完成AutoComplete：輸入框Input 的一項(xiàng)功能，提供備選項(xiàng)輔助輸入。
• 數(shù)字輸入框InputNumber：錄入范圍數(shù)值，帶步進(jìn)器精準(zhǔn)控制，還可帶前/后綴。
• 單選框Radio：只能選擇一個(gè)，選項(xiàng)不宜過(guò)多，按鈕形式可做標(biāo)簽頁(yè)Tabs。
• 多選框Checkbox：可多選，選項(xiàng)不宜過(guò)多，單個(gè)使用可做開(kāi)關(guān)Switch。
• 選擇器Select：以下拉菜單的形式呈現(xiàn)更多選項(xiàng)，可單選/多選，可帶輸入。
• 級(jí)聯(lián)選擇Cascader：選項(xiàng)數(shù)量較大，采用分類的方式將選項(xiàng)分隔。
• 穿梭框Transfer：可多選，展示選項(xiàng)更多的信息。
• 日期選擇器DatePicker：選擇日期，可以選擇一段日期。
• 時(shí)間選擇器TimePicker：選擇時(shí)間，可以與日期選擇器DatePicker 組合使用。
• 滑塊Slider：錄入范圍數(shù)值，可與數(shù)字輸入框InputNumber 組合使用，可選擇區(qū)間，可用分段的形式。

想進(jìn)一步了解的小伙伴可以移步各大組件庫(kù)的官網(wǎng)，里面有各個(gè)組件更詳盡的呈現(xiàn)形式及使用方法。

• Ant Design：https://ant.design/docs/react/introduce-cn
• Element：http://element-cn.eleme.io
• iView：https://www.iviewui.com/docs/guide/install

歡迎關(guān)注作者的微信公眾號(hào)：「海鹽社」