如何用react封裝一款ColorPicker 顏色拾色器元件

語言: CN / TW / HK

theme: channing-cyan highlight: night-owl


這是我參與11月更文挑戰的第10天,活動詳情檢視:[2021最後一次更文挑戰](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/") > TIP 👉 **嗚呼!楚雖三戶能亡秦,豈有堂堂中國空無人!____陸游《金錯刀行》**

前言

Web Component是前端界一直非常熱衷的一個領域,用第三方元件化的框架去實現的話,你需要依賴框架本身很多東西,很多時候我們只是簡單的幾個元件,不是很大,也不是很多,所以為了保證元件的`輕量,簡單`,其實這個時候我們並不想採用第三方的框架。 # ColorPicker 顏色拾色器 ### import ```js import ColorPicker from '@/components/ColorPicker/ColorPicker'; ``` ### Props ##### 1. value * 型別:string * 預設值:"#999" * 說明:顏色值 ##### 2. onChange * 型別:func (必填) * 預設值:無 * 說明:拾色器中點選"確定"按鈕後的回撥函式,入參: * {string} color 選中的顏色值 ##### 3. className * 型別:string | array | object(key: 樣式名,value: bool) * 預設值:無 * 說明:最外層元素樣式 ``` ``` 樣式這塊就先不放了 「歡迎在評論區討論」 #### 希望看完的朋友可以給個贊,鼓勵一下