原生js實現拾色器插件

原生js實現拾色器插件

前言

插件功能只知足我司業務需求，若是但願有更多功能的，可在下方留言，我儘可能擴展！若是你有須要或者喜歡的話，能夠給我github來個star ?

倉庫地址

在線預覽

預覽

準備

首先在頁面中引入js文件

在頁面中寫上以下代碼:

Colorpicker.create({
    bindClass:'picker', // 這裏的picker可隨意填 不須要跟我同樣
    change: function(elem,hex){
      // elem: 綁定的元素
      // hex：當前選中顏色的hex值

      elem.style.backgroundColor = hex;
    }
})

bindClass:參數填入你要綁定拾色器的元素，頁面中class爲picker有幾個，拾色器將會生成幾個。拾色器將會分別綁定每一個元素。點擊每一個元素時，都會自動打開該元素綁定的拾色器。

change:在選擇的色彩改變的時候會觸發該回調方法。會回傳兩個參數，第一個elem就是該拾色器生成時綁定的picker;第二個參數，hex表明是回傳的顏色值。起初是插件直接改變綁定元素的顏色，可是想到有些拾色器插件是綁定input表單，改變表單顏色值，有些是改變綁定元素的顏色。因此爲了讓使用者自由度更高點，暫提供兩個回調參數讓你自定義。如上面 我是直接改變元素顏色。

若是須要更多回調方法，我會盡可能擴展

結尾

若有什麼功能須要增長的，可在評論區留言，我儘可能知足。若有什麼疏忽或錯誤，但願您指出。我會盡早修改，以避免誤導他人。