颜色选择器文档 - layui.colorpicker

在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色。

模块加载名称：colorpicker

注意：colorpicker 为 layui 2.4.0 新增模块，不支持 ie10 以下版本，其它高级浏览器均支持。

使用

colorpicker 是一款颜色选择器，如下是一个最基本的用法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>颜色选择器</title>
  6.   <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9. <div id="test1"></div>
  10. <script src="../src/layui.js"></script>
  11. <script>
  12. layui.use('colorpicker', function(){
  13.   var colorpicker = layui.colorpicker;
  14.   //渲染
  15.   colorpicker.render({
  16.     elem: '#test1'  //绑定元素
  17.   });
  18. });
  19. </script>
  20. </body>
  21. </html>
  22.

基础参数

colorpicker 组件目前支持以下参数

参数选项说明类型默认值
elem指向容器选择器string/object-
color默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。string-
format颜色显示/输入格式，可选值： hex、rgb
若在 rgb 格式下开启了透明度，格式会自动变成 rgba。在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。		stringhex（即 16 进制色值）
alpha是否开启透明度，若不开启，则不会显示透明框。开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式，组件会默认加上值为 1 的透明度。相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。
注意：该参数必须配合 rgba 颜色值使用		booleanfalse
predefine预定义颜色是否开启booleanfalse
colors预定义颜色，此参数需配合 predefine: true 使用。Array此处列举一部分：[‘#ff4500’,’#1e90ff’,’rgba(255, 69, 0, 0.68)’,’rgb(255, 120, 0)’]
size下拉框大小，可以选择：lg、sm、xs。string-

预定义颜色

预定义颜色，可以被认为是提供的参考色，因此除了我们默认的预定义颜色之外，你还可以自己定义

  1. layui.use('colorpicker', function(){
  2.   var colorpicker = layui.colorpicker;、
  3.  
  4.   colorpicker.render({
  5.     elem: '#test1'
  6.     ,predefine: true
  7.     ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
  8.   });
  9. });
  10.

颜色被改变的回调

回调名：change
当颜色在选择器中发生选择改变时，会进入 change 回调，你可以通过它来进行所需操作，下面的例子就是实时的输出当前选择器的颜色

  1. layui.use('colorpicker', function(){
  2.   var colorpicker = layui.colorpicker;
  3.  
  4.   colorpicker.render({
  5.     elem: '#test1'
  6.     ,change: function(color){
  7.       console.log(color)
  8.     }
  9.   });
  10. });
  11.

颜色选择后的回调

回调名：done
点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值。

  1. layui.use('colorpicker', function(){
  2.   var colorpicker = layui.colorpicker;
  3.  
  4.   colorpicker.render({
  5.     elem: '#test1'
  6.     ,done: function(color){
  7.       console.log(color)
  8.       //譬如你可以在回调中把得到的 color 赋值给表单
  9.     }
  10.   });
  11. });
  12.

结语

颜色选择器不仅仅是独立使用，它更多情况可能是跟表单结合使用。

layui - 用心与你沟通