3

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

如果需要更多回调方法,我会尽量扩展

结尾

如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。


我是南方大汉
762 声望54 粉丝

爱技术,爱分享