在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色。
模块加载名称: colorpicker注意:colorpicker 为 layui 2.4.0 新增模块,不支持 ie10 以下版本,其它高级浏览器均支持。
colorpicker 是一款颜色选择器,如下是一个最基本的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>颜色选择器</title> <link rel="stylesheet" href="../src/css/layui.css"> </head> <body> <div id="test1"></div> <script src="../src/layui.js"></script> <script> layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; //渲染 colorpicker.render({ elem: '#test1' //绑定元素 }); }); </script> </body> </html>
colorpicker 组件目前支持以下参数
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 指向容器选择器 | string/object | - |
color | 默认颜色,不管你是使用 hex、rgb 还是 rgba 的格式输入,最终会以指定的格式显示。 | string | - |
format | 颜色显示/输入格式,可选值: hex、rgb 若在 rgb 格式下开启了透明度,格式会自动变成 rgba。在没有输入颜色的前提下,组件会默认为 #000 也就是黑色。 |
string | hex(即 16 进制色值) |
alpha | 是否开启透明度,若不开启,则不会显示透明框。开启了透明度选项时,当你的默认颜色为 hex 或 rgb 格式,组件会默认加上值为 1 的透明度。相同的,当你没有开启透明度,却以 rgba 格式设置默认颜色时,组件会默认没有透明度。 注意:该参数必须配合 rgba 颜色值使用 |
boolean | false |
predefine | 预定义颜色是否开启 | boolean | false |
colors | 预定义颜色,此参数需配合 predefine: true 使用。 | Array | 此处列举一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)'] |
size | 下拉框大小,可以选择:lg、sm、xs。 | string | - |
预定义颜色,可以被认为是提供的参考色,因此除了我们默认的预定义颜色之外,你还可以自己定义
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker;、 colorpicker.render({ elem: '#test1' ,predefine: true ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'] }); });
回调名:change
当颜色在选择器中发生选择改变时,会进入 change 回调,你可以通过它来进行所需操作,下面的例子就是实时的输出当前选择器的颜色
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; colorpicker.render({ elem: '#test1' ,change: function(color){ console.log(color) } }); });
回调名:done
点击颜色选择器的“确认”和“清除”按钮,均会触发 done 回调,回调返回当前选择的色值。
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; colorpicker.render({ elem: '#test1' ,done: function(color){ console.log(color) //譬如你可以在回调中把得到的 color 赋值给表单 } }); });
颜色选择器不仅仅是独立使用,它更多情况可能是跟表单结合使用。
layui - 在每一个细节中,用心与你沟通