這回筆記下用 Vue3 + Tailwindcss 打造一個支援遠端搜尋項目和鍵盤選取的 Multi-Select 元件。
內容
內外同步狀態
1. 下拉選單是否開啟；2. 已選擇的內容；3. 是否正在搜尋選項
內部狀態
1. 搜尋字串；2. 當前鍵盤選到哪一個；3. 是否正在用鍵盤導航；4. 外部傳入或是自伺服器取得過的選項列表
由於外部選項會因為搜尋的結果而改變，極高機率會與既有所選的項目不相干，因此用一個 Map 的結構來儲存，讓選項還是可以正常顯示
搜尋
加入 debounce 防止過度觸發搜尋
鍵盤導航
1. select 所在的根元件定為 index = 0
2. 由於 Dropdown 用 Teleport 定位到 body 下，因此在此 dom 觸發的鍵盤事件，要能夠定到 select 所在根元件位置
3. 全選功能用 Ctrl/Command + A 來實作
Teleport
運用 Vue3 的 <Teleport> 將下拉選單定位到 body，可避免 overflow:hidden 所造成的干擾，並用 updatePosition 去即時計算 top, left 和 width 位置。
另外在 resize, scroll 的時候都要觸發
程式碼
Demo 網址：https://andy922200.github.io/component-library-demo/#/multi-select
按讚加入粉絲團
