模仿原生 select 寫成的組件,有統(tǒng)一的樣式,有自定義行為
思路
關(guān)于樣式
由于搜索框有多種狀態(tài),比如,下拉框是否打開(open),是否可輸入(search),是否是單選(single),是否加載中(loading)等。每種狀態(tài)對應(yīng)的樣式是不同的
- 將類樣式名和數(shù)據(jù)綁定到一起,通過數(shù)據(jù),控制是否要添加該樣式名
- 將這些類樣式名,添加到頂層 div 上
關(guān)于輸入和呈現(xiàn)
input 只管輸入,即使有默認值,也不是在input中呈現(xiàn),而是通過span元素呈現(xiàn)
- 輸入是在 input 元素
- 顯示選中項,在 span 元素中。當(dāng)多選的時候,span 元素上需要關(guān)閉按鈕
- 由于選中后有
span元素,因此,會將 input 元素擠到下方 - 當(dāng)下拉框顯示的時候,當(dāng)是單選的時候,
span元素會絕對定位
混入
- 響應(yīng)
up,down,enter鍵 - 通過監(jiān)聽當(dāng)先索引值,響應(yīng)是否要自動滾動
- loading 的狀態(tài),開放出
slot和onSearch函數(shù)
數(shù)據(jù)
- search, 只是盛放 input 元素的 value
- mutableValue, 是默認選中哪些項,然后通過 span 顯示
- mutableOptions,是下拉框的選項
- mutableLoading, 是加載中的控制項