首先，在Ant Design 中，它將下拉菜單（Dropdown）與 選擇器（Select）完全拆分開(kāi)，如果單純從視覺(jué)樣式上來(lái)看，兩者并沒(méi)有較大差異，因此在日常的方案溝通中容易產(chǎn)生混淆。

而我總結(jié)了一下日常描述此組件時(shí)出現(xiàn)的不同名稱，比如：選擇器、下拉選擇 、下拉菜單、下拉框、下拉選擇器、選擇框等等…

那到底應(yīng)該叫什么？！！！！

首先，為了研究名稱的準(zhǔn)確性，我查閱了“字典” World Wide Web Consortium （W3C）的cheatsheet文檔，其中只存在有選擇器 （Select） 這一名詞，即選擇器。而下拉菜單（Dropdown）是并沒(méi)有存在的，結(jié)合對(duì)文檔的細(xì)致研究，因此總結(jié)出使用 “選擇器” 進(jìn)行表達(dá)是一個(gè)較為規(guī)范的說(shuō)法。

而我們回過(guò)頭來(lái)看，為什么 Ant Deisgn 會(huì)將同樣的選擇拆分為 下拉菜單與選擇器呢？其實(shí)在實(shí)際功能上兩者會(huì)有較大的不同點(diǎn)。

下拉菜單

主要是針對(duì) 操作 進(jìn)行集合，主要的使用場(chǎng)景是在導(dǎo)航、工具菜單以及部分操作集合里。

導(dǎo)航：比如在ＧrowingIO的官網(wǎng)中，通過(guò)下拉菜單，他就可以將產(chǎn)品下面的子欄目導(dǎo)航統(tǒng)一放在下拉菜單中。

工具菜單：比如在 MacOS的全局菜單中，都是將所有的操作放置在頂部的工具欄，通過(guò)使用下拉菜單進(jìn)行呈現(xiàn)，比如 Figma 軟件。

操作集合：比如我們?cè)诒砀竦牟僮鲄^(qū)域經(jīng)常會(huì)使用下拉菜單將很多操作放到一起。

選擇器

主要是針對(duì) 選項(xiàng) 進(jìn)行收折，他是必須包含兩個(gè)部分，錄入框以及下拉選項(xiàng)。使用場(chǎng)景是在表單的中可選項(xiàng)過(guò)多之后，會(huì)使用選擇器將所有選項(xiàng)進(jìn)行整合。比如我們選擇客戶的歸屬人，因?yàn)榭蛇x擇的成員較多，因此通過(guò)選擇器能夠使所有選項(xiàng)進(jìn)行集中展示。

其次，兩者的混淆，主要是對(duì)下拉選項(xiàng)的問(wèn)題，其實(shí)一般對(duì)于下拉選項(xiàng)時(shí)，大家更通用的表述是下拉菜單，也會(huì)因此造成了兩者之間的混淆。

以上就是本期分享的內(nèi)容了，我們下期再見(jiàn)~

轉(zhuǎn)載聲明：本文來(lái)源于網(wǎng)絡(luò)，不作任何商業(yè)用途