一个灵活高度自定义的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