color参数必须显式传入且仅在首次render时生效,支持所有CSS颜色语法并自动归一化为#rrggbb;不读取input的value值,format不影响默认选中逻辑,动态更新需调用setValue()。

默认颜色直接通过 color 参数设置,不是靠 input 的 value 属性,也不是靠 format 或 predefine 间接影响。
color 参数必须显式传入,且只在 render 时生效
layui.colorpicker 不读取绑定 <input> 元素的初始 value 值。即使你写 <input value="#ff6b6b">,不传 color 参数,弹出面板仍默认从 #1e9fff(Layui 主色)开始。
-
color值支持所有 CSS 颜色语法:十六进制(#39c0ed)、RGB(rgb(57,192,237))、颜色名("red"),内部会自动归一化为#rrggbb格式用于显示 - 若同时设了
predefine(预设色板)和color,面板打开后高亮预设色中匹配的那个;若不匹配,则高亮顶部输入框里的值,但色盘指针仍落在默认起始位置——这是常见视觉错觉,实际默认色已生效 -
color是一次性初始化参数,后续调用picker.setValue()才能动态改,默认值无法运行时“重载”
别把 format 和 color 搞混:format 不影响默认选中逻辑
format: 'rgb' 只控制顶部输入框显示格式和用户手动输入时的解析行为,对默认颜色的解析和初始定位毫无作用。哪怕你设 format: 'hex' 但 color: 'rgb(255, 107, 107)',照样正常工作。
- 错误写法:
elem: '#myInput', value: '#ff6b6b'——value不是 colorpicker 的合法配置项,会被忽略 - 正确写法:
color: '#ff6b6b'或color: 'tomato' - 如果需要让 input 元素的
value也同步初始值,得手动赋值:document.querySelector('#myInput').value = '#ff6b6b'
表格内动态渲染时,color 要从数据里取,不能写死
在 table.render() 的 done 回调里批量初始化 colorpicker,每个单元格的默认色必须从当前行数据中提取,否则全部变成同一个颜色。
- 示例中
let initColor = $this.data('value') || '#1e9fff'是关键:用data-value存原始值,避免 DOM 查询歧义 - 别在 render 外层写死
color: '#1e9fff'然后复用同一个配置对象——所有实例会共享该引用,导致后续 setValue 相互干扰 - 如果数据里存的是 RGB 字符串(如
"rgb(255, 107, 107)"),直接传给color即可,无需转 hex;Layui 内部会处理
真正容易被忽略的是:color 参数必须在首次 render() 时传入,之后无法通过修改配置对象或重新 render 来“刷新”默认值——它只是一次性快照。要动态更新,只能调用实例的 setValue() 方法。


















