5 4 月 2026, 周日

Fastadmin 引用layui组件颜色选择器

下载Layui:

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

将下载好的包解压复制layui目录至Fastadmin框架 public/assets/libs 目录下:

在 public/assets/js/backend-init.js 文件下引入layui:

require.config({
    paths: {
        'layui': '../libs/layui-v2.9.18/layui',
    },
    shim: {
        'layui': {
            deps: ['css!../libs/layui-v2.9.18/css/layui.css'],
            exports: "layui"
        },
    }
});

使用Layui颜色选择:

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('选择颜色')}:</label>
        <div class="col-xs-12 col-sm-8 layui-input-inline" style="width: 120px;">
            <input type="text" name="row[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>
                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);
                        }
                    });
                });

最终效果:


点击确认后提交的内容

Avatar photo

sion932