layui 编辑框 颜色码

1，效果图

2，说明

制作一个编辑弹窗，可以设置颜色

3，代码

  <form class="layui-form" action="">
    <input type="hidden" name="id" value="${entity.id}" />
    <div class="backgroundf addwrap" style="background: white;">
        <div class="layui-form">

            <div class="layui-form-item">
                <label class="layui-form-label">天数</label>
                <div class="layui-input-inline"  style="width: 500px">
                    <input type="text" name="remindday"  autocomplete="off" value="${entity.remindday}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-inline" style="width: 450px;">
                    <input type="text" name="color" placeholder="请选择颜色" class="layui-input" value="${entity.color}" id="test-form-input">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test-form"></div>
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline"  style="width: 500px">
                   <textarea id="bz" name="bz"  style="width:500px;height: 100px " class="layui-textarea">${entity.bz}</textarea>
                </div>
            </div>

            <div class="flex flex-align-center layui-form-item" style="justify-content: center;">
                <div class="flex flex-jusity-around tjbtn" style="margin-top: 20px;">
                    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary qx">取消</button>
                    <button class="layui-btn layui-btn-radius layui-btn-sm " lay-submit lay-filter="formDemo">保存</button>
                </div>
            </div>
        </div>
    </div>
  </form>







	var colorpick='${entity.color}'

	layui.config({
        base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        dltable: 'treegrid/dltable',
        tableSelect:'tableSelect/tableSelect',
        treeGrid:'treegrid/treeGrid'
    });

    layui.use(["form","table",'soulTable','laypage','layer','tree', 'util','treeGrid','tableSelect','colorpicker'],function(){
        if(colorpick==''){
            colorpick='#1c97f5';
        }
        layui.colorpicker.render({
            elem: '#test-form'
            ,color: colorpick
            ,done: function(color){
                $('#test-form-input').val(color);
            }
        });
        
       
        layui.form.on('submit(formDemo)', function (data) {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            
            $.ajax({
                url: '/**/save',
                method:'post',
                data: data.field,
                dataType:'JSON',
                success: function (data) {
                    dLong.layerMsg(data.msg)
                    //window.parent.searchBtn();
                    parent.layer.close(index);
                }

            });
            return false;
        });
    });