当前博客：40-快码FOF中文编程layui教学-组件：颜色选择器

188 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

在做主题的适合，想要自定义主题，都需要颜色选择器的帮助，来选取中意的颜色。

layui颜色选择器，可以选择透明度、可以预设颜色、可以支持 hex、rgb、rgba。

一个颜色选择器的基础代码示例：

<区块 id="演示1"></区块>
<脚本>
	新建对象 lay_颜色选择器({
		[lay_颜色选择器.配置.绑定元素]: "#演示1", //绑定元素
		[lay_颜色选择器.配置.颜色]: "#2ec770",
		[lay_颜色选择器.配置.改变]: 定义函数 (颜色) {
			//颜色改变的回调
			lay_弹出层.消息框("选择了：" + 颜色);
		},
	});
</脚本>

代码效果展示：

完整参数代码示例：

<区块 id="演示2"></区块>
<脚本>
	新建对象 lay_颜色选择器({
		[lay_颜色选择器.配置.绑定元素]: "#演示2", //绑定元素
		[lay_颜色选择器.配置.颜色]: "#2ec770",
		[lay_颜色选择器.配置.格式]: lay_颜色选择器.格式.rgb,
		[lay_颜色选择器.配置.透明度]: 真,
		[lay_颜色选择器.配置.预定义]: 真,
		[lay_颜色选择器.配置.颜色集]: ["#F00", "#0F0", "#00F", "rgb(255, 69, 0)", "rgba(255, 69, 0, 0.5)"],
		[lay_颜色选择器.配置.大小]: lay_颜色选择器.大小.小尺寸,
		[lay_颜色选择器.配置.改变]: 定义函数 (颜色) {
			//颜色改变的回调
			lay_弹出层.消息框("选择了：" + 颜色);
		},
		[lay_颜色选择器.配置.完成]: 定义函数 (颜色) {
			//颜色确认完成的回调
			lay_弹出层.消息框("确认选择：" + 颜色);
		},
	});
</脚本>

代码效果展示：