layui colorpicker 取值唯一可靠方式是 render 时配置 change 或 done 回调;change 实时触发并返回颜色字符串(如 "#1e9fff"),done 仅在确认或清空时触发;必须显式加载 colorpicker 模块,且 elem 必须为 type="text"/"color" 的 input 元素。

colorpicker 的 change 和 done 回调才是唯一可靠取值入口
直接读 elem.value 或监听原生 input / change 事件基本无效——Layui colorpicker 不操作真实 input 元素(哪怕你绑的是 <input>),而是通过浮层选色后手动赋值,且不触发原生事件。真正能拿到颜色值的,只有 render 时配置的 change 或 done 回调函数。
change 在每次拖动滑块、点击色板、输入框编辑时立即触发;done 仅在用户确认选择(点确定/失焦/回车)或清空(点 ×)时触发。多数场景用 change 更合适。
-
change回调参数是纯颜色字符串,如"#1e9fff",不是 event 对象 -
alpha: true开启后,change第二个参数是当前 alpha 值(0–1),颜色主值仍为十六进制,不含透明度信息 - 别在回调里写
this.value——this指向的是 render 实例,不是 DOM 元素 - 想同步更新 input 的 value,得手动赋值:
$(this.elem).val(color)
动态渲染(如表格、弹窗)中取值必须绑定到实例,不能靠全局监听
Layui colorpicker 没有类似 form.on('colorpicker(filter)') 的事件委托机制。每个 colorpicker 都要单独 render,并在返回的实例上挂回调。表格里每行一个 colorpicker,就得为每个单元格 DOM 单独调一次 render()。
- 表格场景下,在
table.done回调里遍历所有目标元素,逐个 render:layui.$('.cp-cell').each(function(){ layui.colorpicker.render({ elem: this, change: function(color){ /* 取值逻辑 */ } }); }) - 务必用
data-*属性把行数据“带进去”,例如:templet: '<div class="cp-cell" data-id="{{d.id}}"></div>',然后在change里用$(this.elem).data('id')拿到对应行 ID - 避免重复 render 同一元素——会导致
change多次执行。要么提前layui.colorpicker.destroy(elem),要么加标记跳过已初始化元素
2.8+ 版本必须显式加载模块,否则 layui.colorpicker 是 undefined
升级到 Layui 2.8+ 后,colorpicker 已从基础模块剥离,即使引入了 layui.all.js,不显式声明依赖也拿不到模块。
- 必须写
layui.use(['colorpicker'], function(){ ... }),漏掉'colorpicker'就会静默失败 -
elem必须指向<input type="text">或<input type="color">,传div、button等其他元素不会报错,但完全无反应 -
format: 'rgb'只影响面板显示和输入框回填格式,change拿到的color始终是#rrggbb形式,需自行解析 RGB
表格中修改某行颜色后,如何同步更新缓存数据
colorpicker 改变颜色只是 UI 行为,table.cache 不会自动更新。如果后续要提交或 reload,必须手动维护。
- 在
change回调里,先用$(this.elem).data('index')或$(this.elem).data('id')拿到行标识 - 再更新缓存:
layui.table.cache['yourTableId'][index].color = color(注意 index 是表格内部序号,推荐用d.LAY_TABLE_INDEX) - 若需实时刷新视图,可调
table.reload(),但更轻量的做法是局部更新单元格内容:layui.$(this.elem).closest('td').text(color) - 别试图用
table.cache[...].field = xxx后直接 push 到数组——缓存是引用关系,改字段即可,无需重赋值
Layui colorpicker 的取值逻辑非常“实诚”:它不玩黑盒,也不自动同步,所有值都只通过你亲手写的回调交到你手上。最容易忽略的,其实是模块加载和 DOM 绑定这两步——写对了,后面全是可控的;写错了,连 console 都不报错,只默默不工作。











