自定義select組件

模仿原生 select 寫成的組件,有統(tǒng)一的樣式,有自定義行為

思路

關(guān)于樣式

由于搜索框有多種狀態(tài),比如,下拉框是否打開(open),是否可輸入(search),是否是單選(single),是否加載中(loading)等。每種狀態(tài)對應(yīng)的樣式是不同的

  1. 將類樣式名和數(shù)據(jù)綁定到一起,通過數(shù)據(jù),控制是否要添加該樣式名
  2. 將這些類樣式名,添加到頂層 div 上

關(guān)于輸入和呈現(xiàn)

input 只管輸入,即使有默認值,也不是在input中呈現(xiàn),而是通過span元素呈現(xiàn)

  1. 輸入是在 input 元素
  2. 顯示選中項,在 span 元素中。當(dāng)多選的時候,span 元素上需要關(guān)閉按鈕
  3. 由于選中后有span元素,因此,會將 input 元素擠到下方
  4. 當(dāng)下拉框顯示的時候,當(dāng)是單選的時候,span元素會絕對定位

混入

  1. 響應(yīng) up,down,enter
  2. 通過監(jiān)聽當(dāng)先索引值,響應(yīng)是否要自動滾動
  3. loading 的狀態(tài),開放出 slotonSearch 函數(shù)

數(shù)據(jù)

  1. search, 只是盛放 input 元素的 value
  2. mutableValue, 是默認選中哪些項,然后通過 span 顯示
  3. mutableOptions,是下拉框的選項
  4. mutableLoading, 是加載中的控制項
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • //------------------------- 第一章 認識JQuery ----------------...
    米塔塔閱讀 806評論 0 9
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評論 19 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,219評論 4 61
  • 獨居和獨處不同。獨居是空間上的一個人,獨處是心靈上一個人。像極了英語中的lonely 和 alone的區(qū)別。我...
    朵墨閱讀 543評論 0 0
  • 感恩今天麗娜,文靜萍姐這些小伙伴的鼓勵。并及時解決了我的困惑。讓我學(xué)習(xí)為人處世觀察真善美的道理!社會就是一個大學(xué)...
    悅心慧兒閱讀 218評論 0 0

友情鏈接更多精彩內(nèi)容