【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>