【Layui】10 颜色选择器 ColorPicker

文档地址：

https://www.layui.com/demo/colorpicker.html

 

常规选择器：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规使用</legend>
</fieldset>

<div style="margin-left: 30px;">
    <div id="test1"></div>
    <div id="test2" style="margin-left: 30px;"></div>
</div>

<script>
    layui.use(['colorpicker','jquery','element'], function(){
        let $ = layui.jquery;
        let colorpicker = layui.colorpicker;
        let element = layui.element;

        //常规使用
        colorpicker.render({
            elem: '#test1' //绑定元素
            ,change: function(color){ //颜色改变的回调
                layer.tips('选择了：'+ color, this.elem, {
                    tips: 1
                });
            }
        });

        //初始色值
        colorpicker.render({
            elem: '#test2'
            ,color: '#2ec770' //设置默认色
            ,done: function(color){
                layer.tips('选择了：'+ color, this.elem);
            }
        });
    });
</script>

点击之后可以选择，X表示清空了选择

表单选择器：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>表单赋值</legend>
</fieldset>

<div style="margin-left: 30px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="test-form"></div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    //表单赋值
    colorpicker.render({
        elem: '#test-form'
        ,color: '#1c97f5'
        ,done: function(color){
            $('#test-form-input').val(color);
        }
    });
</script>