在主题定制应用场景中，颜色定制自然是必不可少的。 你经常需要的是直观的选择，所以 colorpicker 模块早就该出现了。 它支持三种颜色模式：hex、rgb 和 rgba。 在代码中进行简单的调用后，您就可以在您的Web系统中自由拖动它。 放下它并选择您最喜欢的颜色。 模块加载名称：colorpicker
注意：colorpicker是layui 2.4.0的新模块，不支持ie10以下版本。 其他中级浏览器也支持它。
使用
colorpicker 是一个颜色选择器。 以下是最基本的用法：
颜色选择器 layui.use('colorpicker', function(){var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1'//绑定元素});});
基本参数
colorpicker组件目前支持以下参数
参数选项说明类型默认值
埃莱姆
指向容器选择器
字符串/对象
颜色
默认颜色，无论你以hex、rgb还是rgba格式输入，最终都会以指定的格式显示。
细绳
格式
颜色显示/输入格式，可选值：hex、rgb
如果rgb格式打开透明度，则格式将手动更改为rgba。 如果不输入颜色，组件将默认为#000，即灰色。
细绳
hex（即十六进制颜色值）
α
是否开启透明度。 如果不打开，则不会显示透明框。 打开透明度选项后，当你的默认颜色为hex或rgb格式时，组件会默认添加透明度值为1。 同样，当您不启用透明度但设置了 rgba 格式的默认颜色时，组件将默认没有透明度。
注意：该参数必须与rgba颜色值一起使用
布尔值
错误的
预定义
是否启用预定义颜色
布尔值
错误的
颜色
预定义颜色，该参数需要与predefine: true一起使用。
大批
这是部分列表： ['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
尺寸
下拉框尺寸，可以选择：lg、sm、xs。
细绳
预定义颜色
预定义颜色可以视为提供的参考颜色，因此除了我们默认的预定义颜色之外，您还可以定义自己的颜色
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)']});});
颜色改变弹跳
回调名称：更改
当选择器中的颜色选择发生变化时，它将进入更改回调elementui弹出框黑，您可以使用它来执行所需的操作。 下面的计数器示例实时输出当前选择器的颜色。
layui.use('colorpicker', function(){var colorpicker = layui.colorpicker; colorpicker.render({elem: '#test1',change: function(color){console.log(color)}});});
选色后弹跳
回调名称：完成
点击颜色选择器的“确认”和“清除”按钮会触发done回调，回调返回当前选择的颜色值。
layui.use('colorpicker', function(){var colorpicker = layui.colorpicker; colorpicker.render({elem: '#test1',done: function(color){console.log(color)//譬如你可以在回调中把得到的 color 赋值给表单}});});
结论
颜色选择器不仅可以单独使用，还可以与表单结合使用。
本页面内容由塔灯网络科技有限公司通过互联网收集整理。 所有信息仅供用户学习参考。 本网站不拥有所有权。 如果您觉得本页内容涉嫌抄袭，请及时联系我们并提供相关证据，我们的工作人员将在5个工作日内与您联系。 一经核实elementui弹出框黑，我们将删除侵权内容。 本文链接：
