原生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表单，改变表单颜色值，有些是改变绑定元素的颜色。因此为了让使用者自由度更高点，暂提供两个回调参数让你自定义。如上面 我是直接改变元素颜色。

若是须要更多回调方法，我会尽可能扩展

结尾

若有什么功能须要增长的，可在评论区留言，我尽可能知足。若有什么疏忽或错误，但愿您指出。我会尽早修改，以避免误导他人。