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