《layui宇宙版教程》：颜色选择器colorpicker-优快云博客

本文链接：https://blog.youkuaiyun.com/ghyghost/article/details/108116157

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.27 颜色选择器colorpicker

在主题定制的应用场景中，自然离不开颜色的自定义，而往往需要的是关于它的直观选择，colorpicker支持hex、rgb、rgba三类色彩模式，在代码中简单的调用后，便可在网页系统中自由拖拽去选择中意的颜色。

模块加载名称：colorpicker。

1.27.1 快速使用

　　测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layui.use('colorpicker', function() {

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1' //绑定元素

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.27.2 基础参数

colorpicker组件目前支持如图1-xx所示的参数。

1.27.3 属性color

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

color: "#123ABC"

});

colorpicker.render({

elem: '#test2',

color: "rgb(255, 120, 0)"

});

colorpicker.render({

elem: '#test3',

color: "rgba(255, 69, 0, 0.68)"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.27.4 属性format和alpha

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

format: "hex"

});

colorpicker.render({

elem: '#test2',

format: "rgb"

});

colorpicker.render({

elem: '#test3',

alpha: true,

format: "rgb"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.27.5 属性predefine和colors

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

predefine: true,

colors: ['#ff4500', '#1e90ff', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)']

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.27.6 属性size

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

size: "lg"

});

colorpicker.render({

elem: '#test2',

size: "sm"

});

colorpicker.render({

elem: '#test3',

size: "xs"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.27.7 颜色被改变的回调

回调名：change。

当颜色在选择器中发生选择改变时，会进入change回调，可以通过它来进行所需的操作，如下代码就是实时的输出当前选择器的颜色。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

change: function(color) {

console.log(color)

}

});

</script>

</body>

</html>

1.27.8 颜色选择后的回调

回调名：done。

点击颜色选择器的“确认”和“清除”按钮，均会触发done回调，回调返回当前选择的颜色值。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var colorpicker = layui.colorpicker;

//渲染

colorpicker.render({

elem: '#test1',

done: function(color) {

console.log(color)

//譬如你可以在回调中把得到的color赋值给表单

}

});

</script>

</body>

</html>