Layui--颜色选择器layui.colorpicker

最新推荐文章于 2023-07-10 14:48:58 发布

y_bccl27

最新推荐文章于 2023-07-10 14:48:58 发布

阅读量5.3k

点赞数 1

分类专栏： UI

本文链接：https://blog.csdn.net/y_bccl27/article/details/103342865

版权

UI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发测试时的layui版本为2.5.5

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

模块加载名称：colorpicker

注意：colorpicker 为 layui 2.4.0 新增模块，不支持 ie10 以下版本，其它高级浏览器均支持。

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>颜色选择器</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</head>
<body>
    <!--
        颜色选择器不仅仅是独立使用，它更多情况可能是跟表单结合使用
    -->
    <div id="test1"></div>
    <script type="text/javascript">
        layui.use('colorpicker', function(){
            var colorpicker = layui.colorpicker;
            //渲染
            colorpicker.render({
                elem: '#test1',  //绑定元素
                color: 'red',
                format:'rgb',
                alpha:true,
                predefine: true,
                colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
                size:'lg',
                change: function(color){//当颜色在选择器中发生选择改变时，会进入 change 回调，你可以通过它来进行所需操作，当前示例为实时输出当前选择器的颜色
                    console.log(color);
                },
                done: function(color){//点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值
                    console.log(color)
                    //譬如你可以在回调中把得到的 color 赋值给表单
                }
            });

        });
    </script>
</body>

y_bccl27

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Layui--颜色选择器layui.colorpicker

开发测试时的layui版本为2.5.5在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色模块加载名称：colorpicker注意：colorpicker 为 layui 2.4.0 新增模块，不支...
复制链接

扫一扫

专栏目录