fastadmin 引用layui组件颜色选择器

第一步：先在layui官网下载layui包

layui官网地址：https://layui.dev/

第二步：将下载好的包解压复制layui目录至fastadmin框架libs目录下

第三步：在backend-init.js文件下引入layui

bancjend-init.js文件引入layui代码：

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../libs/layui/layui/layui',
        },
        shim: {
            'layui':{
                deps:['css!../libs/layui/layui/css/layui.css'],
                exports: "layui"
            },
        }
    });
});

第四步：在对应js顶部引入layui

对应js方法中使用layui颜色选择器，例如add方法中使用：

代码：

        add: function () {
            layui.use(function(){
                var colorpicker = layui.colorpicker;
                var $ = layui.$;
                // 渲染
                colorpicker.render({
                    elem: '#ID-colorpicker-demo-form',
                    color: '#1c97f5',
                    done: function(color){
                        $('#ID-colorpicker-demo-form-color').val(color);
                    }
                });
            });
            Controller.api.bindevent();
        },

add.html页面：

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('选择颜色')}:</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="color" value="" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-demo-form-color">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="ID-colorpicker-demo-form"></div>
        </div>
    </div>

最终效果：

到这fastadmin使用layui颜色选择器就完成了，注意：对应js代码必须要写在对应js方法中，写在html页面会报错