原生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表单,改变表单颜色值,有些是改变绑定元素的颜色。所以为了让使用者自由度更高点,暂提供两个回调参数让你自定义。如上面 我是直接改变元素颜色。如果需要更多回调方法,我会尽量扩展
结尾
如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。