ew-color-picker

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

使用場景

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

優勢

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

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

<!-引入顏色選擇器的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>
複製代碼

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

<div></div>
複製代碼

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

const color = new ewColorPicker('div');
複製代碼

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

const color = ewColorPicker.createColorPicker('div');
複製代碼

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

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

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

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

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

ewColorPicker.getDefaultConfig();
複製代碼

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

tips:最新1.7.1版本容許添加到body元素中，固然仍是不建議如此作，這個添加有些許bug。

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

demo1

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

自定義配置

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

{
    el:'.demo2',//綁定選擇器的dom元素
      alpha:true,//是否開啓透明度
      hue:false,//是否開啓色調
      size:{
          width:100,
          height:50
      },//顏色選擇器類型，有四個字符串值normal,medium,small,mini或者一個對象自定義寬高,若是自定義寬高，最小寬高爲25px
      predefineColor:['#223456','rgba(122,35,77,.5)'],//預約義顏色是一個數組
      disabled:false,//是否禁止全部的點擊
      defaultColor:'#eeff22',//默認顏色
      pickerAnimation:'opacity',//或者'height'，開啓顏色選擇器面板的動畫
      pickerAnimationTime:300,//動畫執行時間，默認是200,最大動畫時間爲10000
      sure:function(color){
          console.log(color);
      },//點擊肯定按鈕的回調
      clear:function(){
          console.log(this)
      },//點擊清空按鈕的回調
      togglePicker:(el,flag,context) => {
        console.log('當前根元素',el);
        console.log('當前顏色選擇器實例對象',context);
        if(flag){
            console.log("opened");
        }else{
            console.log("closed");
        }
      },//點擊色塊事件回調,須要注意該事件觸發必需要將hasBox設置爲true
      isLog:false, //是否開啓打印信息,默認是true若是不指定該值的話
      changeColor:(color) => {
        console.log('顏色值改變時觸發:',color);
      },
      hasBox:true //默認爲true,或者爲false，表示是否顯示顏色選擇器
      isClickOutside:true, //默認爲true，或者設置爲false,表示是否容許點擊顏色選擇器區域以外關閉顏色選擇器
      hasClear:true,//是否顯示清空按鈕，默認爲true
      hasSure:true, //是否顯示肯定按鈕，默認爲true,不建議設置爲false
      hasColorInput:true, //是否顯示輸入框,默認爲true,不建議設置爲false
      boxDisabled:true,//默認是false,設置爲true而且hasBox爲true，禁止點擊色塊打開顏色選擇器
      openChangeColorMode:true,//是否打開顏色切換模式，注意打開這個模式必需要將alpha和hue設置爲true
      hueDirection:"horizontal",//或者vertical,默認是垂直佈局顯示,表示hue色階柱是水平仍是垂直佈局顯示
      alphaDirection:"horizontal",//或者vertical,默認是垂直佈局顯示,表示透明度柱是水平仍是垂直佈局顯示
      lang:"zh",//或en,表示啓用中文模式仍是英文模式
      clearText:"清空",//清空按鈕文本，若是想要自定義該值，須要設置userDefineText爲true
      sureText:"肯定",//肯定按鈕文本,若是想要自定義該值，則須要設置userDefineText爲true
      userDefineText:false,//默認爲false，設置爲true以後，lang屬性的切換將無效
}

複製代碼

咱們先來分析第一個配置屬性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;
}
複製代碼

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訪問太慢，能夠訪問碼雲站點的官網。

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

更新日誌

ew-color-picker

打個廣告，我在思否上線的課程玩轉typescript1，玩轉typescript2，從零開始實現一個mini版本的編譯器適用於有必定基礎的前端，還望你們多多支持，謝謝。

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

ew-color-picker

使用場景

優勢

自定義配置

更新日誌