在 Vue3 利用各瀏覽器的原生 input 的 color 類型,就可以簡易的產出色彩選擇器。這邊筆記下重點。
內容
相容性
除了 IE、Android 版本的 Firefox 外,其餘都是可支援的
程式碼
由於 <input> 本身因各瀏覽器實作方式不同,而導致「顯示所選顏色」時,會有無法消除的 border 或 padding 發生。最簡單的方法是將此 input 以 absolute + tabIndex = -1 的方式遠離畫面 & 避免選到,另外套用 <div> 區塊來顯示
按讚加入粉絲團