一个灵活高度自定义的JavaScript颜色选择器

ew-color-picker

这是一个用javascript编写的灵活的，高度自定义的颜色选择器。

使用场景

这个颜色选择器适用于中小型项目，例如主题的切换。不一样于组件库中的颜色选择器组件，它的配置自主化，根据用户的需求来自定义。

优势

html5的原生颜色选择器样式很差看，而组件库的颜色选择器不够灵活多变，这样一来，就有了这个颜色选择器的诞生。

咱们先来尝尝鲜，看看一个简单的示例:

<!-引入颜色选择器的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>
复制代码

而后在页面中放一个元素:

<div></div>
复制代码

在javascript中，咱们只须要以下代码:

const color = new ewColorPicker('div');
复制代码

如此一来，一个简单的颜色选择器就出如今页面上了。可能大多数人不大喜欢实例化的方式，那么咱们也提供了一个方法来建立它:

const color = ewColorPicker.createColorPicker('div');
复制代码

这样也能够建立一个颜色选择器实例。

tips:须要注意的就是，这些功能都是1.6.7版本加上的，因此请使用最新版本的js，实际上，以上展现的引入连接会自动帮咱们引入最新版本的js,使用最新版本的js，确保咱们在使用当中不会出现bug以及使用新功能，只要我在，这个插件就会自动更新，只要能想到的东西，都会加上去。

tips:还须要说明一点的是，为了遵循一个颜色选择器对应一个实例，因此，当传入的dom元素是多个的话，也会取第一个dom元素来实例化。例如传的是div元素，若是页面中有多个div元素，那实际上在颜色选择器内部获取到的div元素就是多个，但始终都会取第一个div元素来实例化。若是想要实例化多个颜色选择器，咱们则能够像以下代码那样使用

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版本的编译器适用于有必定基础的前端，还望你们多多支持，谢谢。