一個靈活高度自定義的JavaScript顏色選擇器

ew-color-picker

這是一個用javascript編寫的靈活的，高度自定義的顏色選擇器。

使用場景

這個顏色選擇器適用於中小型項目，例如主題的切換。不一樣於組件庫中的顏色選擇器組件，它的配置自主化，根據用戶的需求來自定義。

優勢

html5的原生顏色選擇器樣式很差看，而組件庫的顏色選擇器不夠靈活多變，這樣一來，就有了這個顏色選擇器的誕生。

咱們先來嚐嚐鮮，看看一個簡單的示例:

<!-引入顏色選擇器的css樣式-->
  <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
  <!--引入插件JavaScript-->
  <script src="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.js"></script>

而後在頁面中放一個元素:

<div></div>

在javascript中，咱們只須要以下代碼:

const color = new ewColorPicker('div');

如此一來，一個簡單的顏色選擇器就出如今頁面上了。可能大多數人不大喜歡實例化的方式，那麼咱們也提供了一個方法來建立它:

const color = ewColorPicker.createColorPicker('div');

這樣也能夠建立一個顏色選擇器實例。

tips:須要注意的就是，這些功能都是1.6.7版本加上的，因此請使用最新版本的js，實際上，以上展現的引入連接會自動幫咱們引入最新版本的js,使用最新版本的js，確保咱們在使用當中不會出現bug以及使用新功能，只要我在，這個插件就會自動更新，只要能想到的東西，都會加上去。

tips:還須要說明一點的是，爲了遵循一個顏色選擇器對應一個實例，因此，當傳入的dom元素是多個的話，也會取第一個dom元素來實例化。例如傳的是div元素，若是頁面中有多個div元素，那實際上在顏色選擇器內部獲取到的div元素就是多個，但始終都會取第一個div元素來實例化。若是想要實例化多個顏色選擇器，咱們則能夠像以下代碼那樣使用

const elements = document.querySelectorAll('div');
   elements.forEach(item => new ewColorPicker(item));

咱們也提供了一個方法getDefaultConfig來獲取顏色選擇器實例的默認配置對象。以下:

ewColorPicker.getDefaultConfig();

tips:還須要注意的就是，傳入的dom元素不能是'html','head','body','meta','title','link','style','script'這些特殊的元素，不然插件會在控制檯給出一個錯誤提示。

這都是最簡單的用法，可能這樣不太直觀，請看以下一個簡單的示例:

demo1

看到這裏，也許會有人疑問，這怎麼就靈活多變，高度自定義呢？彆着急，讓咱們繼續。

自定義配置

咱們來看一個配置對象，以下所示:

{
    hue: true,
    alpha: false,
    size: "normal",
    predefineColor: [],
    disabled: false,
    defaultColor: "",
    openPickerAni: "height",
    sure: emptyFun,
    clear: emptyFun,
    openPicker: emptyFun,
    isLog: true,
    changeColor: emptyFun,
    hasBox: true,
    isClickOutside: true,
    hasClear:true,
    hasSure:true,
    hasColorInput:true
}

咱們先來分析第一個配置屬性hue,或許咱們看到一個完整的配置顏色選擇器，應該是以下圖所示:

咱們來着重分析一下每一塊表明什麼:

根據上圖分析，咱們也知道了hue的屬性就是控制最右邊的色階柱的顯隱，顯然默認是顯示的。

tips:若是是自定義配置，那麼傳入的元素在配置對象中就是el屬性，例如，咱們只須要一個顏色面板。那麼咱們能夠編寫以下代碼:

const color = new ewColorPicker({
      el:'div',
      hue:false
  })

如此一來，咱們就會獲得以下所示的顏色選擇器:

正如圖中所示，就一個紅色的面板可供選擇，這確實是一個很差的選擇，不過不要緊，咱們提供了updateColor方法去手動改變顏色值。代碼以下:

//color爲實例化的顏色選擇器實例
   color.updateColor("#0ff");

固然，使用這個方法的前提是顏色選擇器面板必須顯示當中，而且傳入的參數還要是一個正確格式的顏色，不然會在控制檯給出錯誤提示，也不會生效。

請看以下一個示例:

demo

好，讓咱們接着來看第二個配置屬性alpha,很顯然這個屬性是爲了控制透明度柱子的顯隱的，默認是不顯示的。例如，咱們能夠這樣修改:

const color = new ewColorPicker({
      el:'div',
      hue:false,
      alpha:true
  })

以上代碼就會獲得以下圖所示的一個顏色選擇器:

可能不少同窗注意到了從前面的一個示例中設置了這樣一個hasBox屬性，它的默認值是true,很顯然這個值是控制色塊的顯隱的，若是該值爲false,那麼顏色面板默認就會顯示。因此，咱們提供了兩個方法openPicker和closePicker來手動控制顏色面板的關閉，（PS:點擊目標元素區域以外關閉稍後再說）。以下所示:

//color爲顏色選擇器實例
 color.openPicker(openPickerAni);//參數爲即height或opacity兩種字符串值，等同後續的openPickerAni配置屬性
 color.closePicker(openPickerAni);

咱們來看以下一個手動控制顏色選擇器關閉的示例:

demo

在以上示例中，可能有人注意到了isClickOutside這個屬性，沒錯這個屬性也是一個布爾值，默認爲true，表示點擊顏色面板以外的區域，就會關閉顏色面板。來看以下的示例:

<div id="demo"></div>
<button type="button" id="openClickOutsideBtn">開啓|關閉目標區域元素點擊事件</button>

button {
  float:right;
}

const color = new ewColorPicker({
  el:"#demo",
  isClickOutside:false
})
document.getElementById("openClickOutsideBtn").onclick = function(){
  color1.config.isClickOutside = !color1.config.isClickOutside;
  //爲了不出現意想不到的問題，在修改屬性以後須要重置狀態，並從新渲染一次顏色選擇器
  //由於是經過配置對象的pickerFlag屬性控制面板的顯隱的，這是一個私有屬性
  color1.config.pickerFlag = false;
  //實例上的render方法爲原型對象上的，須要傳入實例中的元素和修改事後的配置對象做爲參數
  //實例上的rootElement屬性保存着根元素
  color1.render(color1.rootElement,color1.config);
}

demo

讓咱們繼續，咱們能夠看到size屬性，他的值能夠是字符串值，也能夠是對象。字符串值主要爲這四個normal,medium,small,mini中的其中一個，或者也能夠自定義一個對象{ width:25;height:25 },默認值是normal。固然設置該值的前提是將hasBox屬性設置爲true,盒子元素都不顯示，設置該值有什麼用呢?後面的openPickerAni屬性與openPicker方法也是一樣的必需要將hasBox設置爲true,這也是默認將該值設置爲true的緣由。讓咱們來看看以下一個示例:

<div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

const colors = document.querySelectorAll('div');
    const colorConfigs = [
        {
            size:"normal"
        },
        {
            size:"medium"
        },
        {
            size:"small"
        },
        {
            size:"mini"
        },
        {
            size:{
                width:25,
                height:25
            }
        }
    ];
    colors.forEach((item,index) => {
        new ewColorPicker({
            el:item,
            ...colorConfigs[index]
        })
    })

能夠看到運行效果以下圖所示:

讓咱們接着看下一個屬性predefineColor,顧名思義，這個屬性是一個數組，表明預約義顏色，每個數組項必須是一個合格的顏色值，不然是不會渲染到顏色選擇器上的。來看以下一個示例:

<div></div>

const color = new ewColorPicker({
        el:"div",
        predefineColor:["#2396ef","#fff","rgba(134,11,12,1)","#666"],
        alpha:true
    })

而後咱們能夠看到以下圖所示:

讓咱們接着看下一個屬性，disabled，這個屬性的做用就是禁止點擊盒子塊元素打開顏色面板，也就是說若是hasBox爲false的話，請忽略這個屬性。

tips:後續可能會考慮增長顏色面板的禁止點擊事件等等。

這個很簡單沒什麼好說的，因此就不舉例了。讓咱們接着來看下一個屬性defaultColor，即默認顯示的顏色值。若是檢測到的顏色值不符合格式，則會在控制檯給出錯誤提示，好比看這樣一個示例:

<div></div>

const color = new ewColorPicker({
        el:"div",
        predefineColor:["#2396ef","#fff","rgba(134,11,12,1)","#666"],
        alpha:true,
        defaultColor:"#123"
    })

以下圖所示:

tips:或許這個檢測顏色值是否合格的機制有些許問題，後續會優化。

讓咱們接着來看下一個屬性openPickerAni,它就只有兩個值，和前面手動開啓或關閉顏色選擇器方法的參數值同樣，這裏就沒必要贅述，固然想要該屬性生效不能將hasBox設置爲false。

一樣的openPicker也是針對hasBox爲true而生效的，它是點擊色塊元素的回調，它有兩個回調的參數。即el和context,也就是元素自己和元素自己的實例對象。

const color = new ewColorPicker({
     el:"div",
     openPicker:(el,context) => {
        //能夠經過context.config.pickerFlag來判斷是打開仍是關閉
     }
  })

同理clear和sure就是清空按鈕和肯定按鈕的回調，要讓這兩個回調生效，就不能將hasClear和hasSure設置爲false,由於這兩個配置屬性分別是空值清空和肯定的顯隱的。其中hasClear的回調參數爲defaultColor,該值爲空就爲空，以及元素自己實例對象context。而sure的回調參數則是color值和元素自己實例對象。請看以下寫法:

const color = new ewColorPicker({
     el:"div",
     clear:(defaultColor,context) => {
        console.log(defaultColor,context);
     },
     sure:(color,context) => {
       console.log(color,context);
     }
   })

除了這兩個回調以外，咱們還額外增長了一個回調即changeColor函數，顧名思義，這個函數的做用就是當顏色值改變時觸發，好比點擊色階柱改變色彩，點擊透明度柱改變透明度等等。請看以下代碼:

const color = new ewColorPicker({
     el:"div",
     changeColor:(color) => {
         //顏色值只要改變時就觸發，回調參數爲改變後的顏色值
     }
   })

還有一個isLog屬性，這個屬性的默認值是true，表示會在控制檯打印一些信息，請忽略這個屬性，啊哈哈，後續考慮將它的默認值設置爲false。

最後一個就是hasColorInput屬性，表示是否顯示輸入框，這在自定義輸入框（好比和element ui的輸入框綁定在一塊兒）和顏色選擇器綁定中十分有效，若是想要使用它，就不推薦設置爲false。

咱們來看一個示例以下:

<div></div>

const color = new ewColorPicker({
        el:"div",
        hasColorInput:false,
        hasSure:false,
        hasBox:false,
        hasClear:false,
        alpha:true
    })

效果以下圖所示:

目前最新版本爲1.6.8，後續還會考慮加更多的功能，只要你有需求，跟我提，我以爲合理就會加，若是以爲本顏色選擇器能夠幫助到你，還望給個star,源碼。

更多描述能夠參見文檔官網和碼雲站點文檔官網。

tips:若是github訪問太慢，能夠訪問碼雲站點的官網。

最後，後續有空的話，我會考慮寫文章來分析這個顏色選擇器的實現原理。

打個廣告，我在思否上線的課程玩轉typescript，適用於有必定基礎的前端，還望你們多多支持，謝謝。